AppShell

import { AppShell, Sidebar, Toc, TopNav, Footer } from "@axe/ui";<AppShell  variant="docs"  topbar={<TopNav /* ... */ />}  sidebar={    <Sidebar items={navItems} value={cur} onValueChange={setCur} />  }  toc={    <Toc      activeId={activeHeading}      items={[        { id: "intro", label: "소개" },        { id: "api", label: "API", level: 3 },      ]}    />  }  footer={<Footer />}>  <article className="axe-prose">…</article></AppShell>

import { AppShell, Sidebar } from "@axe/ui";<AppShell  variant="dashboard"  sidebar={<Sidebar items={navItems} value={cur} onValueChange={setCur} />}  subnavLabel="탐색">  <section>…대시보드 본문…</section></AppShell>

<div class="axe-app-shell" data-shell="docs">  <a href="#main" class="axe-skip-link">본문으로 건너뛰기</a>  <div class="axe-app-shell__topbar">    <!-- topbar -->    <details class="axe-app-shell__subnav">      <summary class="axe-app-shell__subnav-summary">        <span class="axe-app-shell__subnav-label">메뉴</span>      </summary>      <div class="axe-app-shell__subnav-panel">        <nav class="axe-sidebar" aria-label="Primary"><!-- 네비 복제 --></nav>      </div>    </details>  </div>  <div class="axe-app-shell__main">    <aside class="axe-app-shell__sidebar" aria-label="Primary">…</aside>    <main id="main" class="axe-app-shell__content">…</main>    <aside class="axe-app-shell__toc" aria-label="On this page">…</aside>  </div>  <div class="axe-app-shell__footer"><!-- footer --></div></div>

import { useCallback, useSyncExternalStore } from "react";import { AppShell, PanelLeftIcon } from "@axe/ui";const RAIL_KEY = "axe-rail-collapsed:console";const RAIL_EVENT = "axe:rail-collapse";// 상태의 진실은 localStorage 다. useState + useEffect 로 읽으면 펼친 폭이// 한 프레임 보였다가 접힌다 — useSyncExternalStore 는 서버 스냅샷(펼침)으로// hydration 을 맞춘 뒤 저장값을 첫 페인트 전에 반영한다.let snapshot = null;function readCollapsed() {  if (snapshot !== null) return snapshot;  try {    snapshot = window.localStorage.getItem(RAIL_KEY) === "1";  } catch {    snapshot = false;  }  return snapshot;}function subscribe(onStoreChange) {  window.addEventListener(RAIL_EVENT, onStoreChange);  return () => window.removeEventListener(RAIL_EVENT, onStoreChange);}// 같은 버튼이 두 자리에 선다 — 레일 brand 행(펼침용)과 bar 좌측 칸(접힘용).// 계약이 상태마다 하나만 display 하므로 숨은 쪽은 AX 트리에서 빠진다.function RailToggle({ collapsed, onToggle, className = "axe-workspace-rail-toggle" }) {  return (    <button      type="button"      className={className}      aria-label="사이드 패널 접기/펼치기"      aria-controls="console-rail"      aria-expanded={!collapsed}      onClick={onToggle}    >      <PanelLeftIcon />    </button>  );}const collapsed = useSyncExternalStore(subscribe, readCollapsed, () => false);const toggleRail = useCallback(() => {  snapshot = !readCollapsed();  try {    window.localStorage.setItem(RAIL_KEY, snapshot ? "1" : "0");  } catch {    /* 저장이 막혀도 이번 세션의 토글은 살아 있다 */  }  window.dispatchEvent(new Event(RAIL_EVENT));}, []);<AppShell  variant="dashboard"  className="axe-workspace-shell axe-workspace-shell--wide"  data-rail-collapsed={collapsed ? "" : undefined}  sidebar={    <div id="console-rail" className="axe-workspace-rail">      <div className="axe-workspace-rail__brand">        {/* 펼침용 토글 — 레일과 함께 사라진다 */}        <RailToggle collapsed={collapsed} onToggle={toggleRail} />      </div>      {/* 나머지 rail */}    </div>  }  topbar={    <header className="axe-workspace-bar">      <div className="axe-workspace-bar__left">        {/* 접힘용 토글 — 레일이 비켜난 칸에서만 보인다 */}        <RailToggle          collapsed={collapsed}          onToggle={toggleRail}          className="axe-workspace-bar__icon-button axe-workspace-rail-toggle"        />      </div>      <div className="axe-workspace-bar__center" />      <div className="axe-workspace-bar__right">{/* 검색 · 계정 */}</div>    </header>  }>  <section>…표 밀도가 목적인 콘솔 본문…</section></AppShell>

<div id="console-shell"     class="axe-app-shell axe-workspace-shell axe-workspace-shell--wide"     data-shell="dashboard">  <!-- 여는 태그 직후, parser-blocking. 첫 프레임이 이미 접힌 폭으로 그려진다. -->  <script>    (function () {      try {        if (localStorage.getItem("axe-rail-collapsed:console") !== "1") return;      } catch (error) {        return;      }      document.getElementById("console-shell")        .setAttribute("data-rail-collapsed", "");    })();  </script>  <div class="axe-app-shell__topbar">    <header class="axe-workspace-bar">      <div class="axe-workspace-bar__left">        <!-- 접힘용 인스턴스. 펼침 상태에서는 레일이 이 칸을 덮으므로 계약이 감춘다. -->        <button type="button"                class="axe-workspace-bar__icon-button axe-workspace-rail-toggle"                aria-label="사이드 패널 접기/펼치기"                aria-controls="console-rail"                aria-expanded="true">          <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none"               stroke="currentColor" stroke-width="1.6" stroke-linecap="round"               stroke-linejoin="round">            <rect x="3.5" y="4.5" width="17" height="15" rx="2.5" />            <path d="M9.5 4.5v15" />          </svg>        </button>      </div>      <div class="axe-workspace-bar__center"></div>      <div class="axe-workspace-bar__right"><!-- 검색 · 계정 --></div>    </header>  </div>  <div class="axe-app-shell__main">    <aside class="axe-app-shell__sidebar" aria-label="Primary">      <div id="console-rail" class="axe-workspace-rail">        <div class="axe-workspace-rail__brand">          <!-- entity 칩 · 검색 … -->          <!-- 펼침용 인스턴스. 28px brand 행 재료는 계약이 준다(추가 클래스 불요).               레일이 접히면 이 버튼도 레일과 함께 사라진다. -->          <button type="button"                  class="axe-workspace-rail-toggle"                  aria-label="사이드 패널 접기/펼치기"                  aria-controls="console-rail"                  aria-expanded="true">            <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none"                 stroke="currentColor" stroke-width="1.6" stroke-linecap="round"                 stroke-linejoin="round">              <rect x="3.5" y="4.5" width="17" height="15" rx="2.5" />              <path d="M9.5 4.5v15" />            </svg>          </button>        </div>        <!-- rail body · identity -->      </div>    </aside>    <main id="main" class="axe-app-shell__content">…</main>  </div></div><script>  (function () {    var shell = document.getElementById("console-shell");    if (!shell) return;    /* 인스턴스는 둘 — 상태를 함께 받고 함께 고지한다. */    var toggles = shell.querySelectorAll(".axe-workspace-rail-toggle");    if (!toggles.length) return;    // 첫 동기화 — pre-paint 스니펫이 속성만 복원했으므로 버튼 상태를 맞춘다.    var announce = function () {      var expanded = shell.hasAttribute("data-rail-collapsed") ? "false" : "true";      Array.prototype.forEach.call(toggles, function (toggle) {        toggle.setAttribute("aria-expanded", expanded);      });    };    announce();    Array.prototype.forEach.call(toggles, function (toggle) {      toggle.addEventListener("click", function () {        var next = !shell.hasAttribute("data-rail-collapsed");        shell.toggleAttribute("data-rail-collapsed", next);        try {          localStorage.setItem("axe-rail-collapsed:console", next ? "1" : "0");        } catch (error) {          /* 저장이 막혀도 이번 세션의 토글은 살아 있다 */        }        announce();      });    });  })();</script>

<div class="axe-workspace-rail__brand">  <details class="axe-workspace-entity">    <summary aria-label="현재 조직: AXE Labs. 조직 전환">      <span class="axe-workspace-entity__label">AXE Labs</span>    </summary>    <div>      <a class="axe-workspace-rail__link" href="/axev">AXE Ventures</a>      <a class="axe-workspace-rail__link" href="/axec">AXE Corporation</a>    </div>  </details>  <!-- 전환할 entity 가 없으면 같은 칩을 정적으로: -->  <!-- <span class="axe-workspace-entity axe-workspace-entity--static">         <span class="axe-workspace-entity__label">Cortex</span>       </span> -->  <button class="axe-workspace-search" type="button" data-icon-only="true"          aria-label="검색 열기" aria-haspopup="dialog">    <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none">      <circle cx="11" cy="11" r="6.5" stroke="currentColor" stroke-width="1.8" />      <path d="m16 16 4 4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />    </svg>    <span>검색</span>  </button></div>

<details class="axe-workspace-entity">  <summary aria-label="현재 서비스: Design. 서비스 전환">    <span class="axe-workspace-entity__label">Design</span>    <!-- chevron 을 직접 넣으면 계약이 그것을 14px 로 재고 열림 시 회전시킨다.         생략하면 같은 자리에 CSS 글리프가 그려진다 — 둘 중 하나만. -->    <svg aria-hidden="true" viewBox="0 0 20 20" width="16" height="16" fill="none">      <path d="m5.5 7.5 4.5 4.5 4.5-4.5" stroke="currentColor" stroke-width="1.6"            stroke-linecap="round" stroke-linejoin="round" />    </svg>  </summary>  <div>    <a href="https://design.axelabs.ai" aria-current="page">      <span class="axe-workspace-entity__row">        <span class="axe-workspace-entity__copy">          <strong>Design</strong>          <small>토큰과 컴포넌트 계약</small>        </span>        <!-- 현재 항목 체크: 행 오른쪽 슬롯의 svg. 없으면 슬롯이 비어 접힌다. -->        <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none"             stroke="currentColor" stroke-width="1.6" stroke-linecap="round"             stroke-linejoin="round">          <path d="m5 12.5 4.5 4.5L19 7.5" />        </svg>      </span>    </a>    <a href="https://gate.axelabs.ai">      <span class="axe-workspace-entity__row">        <span class="axe-workspace-entity__copy">          <strong>Gate</strong>          <small>결재와 전자서명</small>        </span>      </span>    </a>  </div></details>

<div class="axe-workspace-rail__identity axe-workspace-rail__identity--stacked">  <!-- entity 행: 18px 마크 · 라벨 · chevron. 메뉴는 entity 전환 메뉴 표면과 같다. -->  <details class="axe-workspace-identity-menu">    <summary class="axe-workspace-identity axe-workspace-identity--entity"             aria-label="현재 entity: AXE Labs. Entity 변경">      <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none"           stroke="currentColor" stroke-width="1.6" stroke-linecap="round"           stroke-linejoin="round">        <path d="M4 20V6.5a1.5 1.5 0 0 1 1-1.42l6-2.1a1 1 0 0 1 1.33.95V20" />        <path d="M12.33 9.4 19 11.6a1.5 1.5 0 0 1 1 1.42V20" />        <path d="M3 20h18M7.5 9.5v0M7.5 13.5v0M16 15v0" />      </svg>      <span class="axe-workspace-identity__label">AXE Labs</span>      <svg aria-hidden="true" viewBox="0 0 20 20" width="16" height="16" fill="none">        <path d="m5.5 7.5 4.5 4.5 4.5-4.5" stroke="currentColor" stroke-width="1.6"              stroke-linecap="round" stroke-linejoin="round" />      </svg>    </summary>    <div class="axe-workspace-identity-menu__panel">      <a href="/axev">        <span class="axe-workspace-entity__row">          <span class="axe-workspace-entity__copy">            <strong>AXE Ventures</strong>            <small>Investment workspace</small>          </span>        </span>      </a>    </div>  </details>  <!-- 계정 행: avatar · 라벨. 메뉴 항목의 글리프는 16px/1.6 stroke 한 벌. -->  <details class="axe-workspace-identity-menu">    <summary class="axe-workspace-identity" aria-label="[email protected] 계정 메뉴">      <span class="axe-workspace-identity__avatar" aria-hidden="true">A</span>      <span class="axe-workspace-identity__label">[email protected]</span>    </summary>    <div class="axe-workspace-identity-menu__panel">      <!-- 도움말: 디스플레이 아래 · 로그아웃 위(0.35.0 확정 구성). 목적지는 이 서비스의           문서 한 장이고, 앱 바깥이라 새 탭이다 — 하던 일이 있는 탭을 뺏지 않는다. -->      <a class="axe-workspace-rail__link" href="https://docs.axelabs.ai/services/gate"         target="_blank" rel="noopener noreferrer">        <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none"             stroke="currentColor" stroke-width="1.6" stroke-linecap="round"             stroke-linejoin="round">          <circle cx="12" cy="12" r="9" />          <path d="M9.7 9a2.45 2.45 0 0 1 4.7.9c0 1.75-2.4 2-2.4 3.7" />          <circle cx="12" cy="17.2" r="1" fill="currentColor" stroke="none" />        </svg>        도움말      </a>      <button class="axe-workspace-rail__link" type="button">        <svg aria-hidden="true" viewBox="0 0 24 24" width="16" height="16" fill="none"             stroke="currentColor" stroke-width="1.6" stroke-linecap="round"             stroke-linejoin="round">          <path d="M14.5 4.5h3a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-3" />          <path d="M10 8.5 6.5 12 10 15.5M6.5 12H15" />        </svg>        로그아웃      </button>    </div>  </details></div>

<!-- 인스턴스 핸들은 **셸이 소유하는 호스트**에 붙는다. 패널 콘텐츠에는     인스턴스에 의존하는 바이트가 없어야 두 사본이 바이트 동일해진다. --><aside class="axe-app-shell__toc" data-axe-ctx="toc" aria-label="현재 컨텍스트">  <section class="axe-workspace-context"           data-axe-page="workflow_detail"           data-axe-subject-service="gate"           data-axe-subject-kind="workflow"           data-axe-subject-id="3f0e4a1c-8b2d-4c6e-9a1f-7d5b2e8c0a44">    <!-- ⓪ 선택. 있으면 **패널의 첫 시각 요소**다 — 아래 ①②③ 을 포함해 어떤         것도 그보다 앞서지 않는다. 전용 슬롯 클래스는 없다(자리가 계약이고         재료는 세션 어휘다). 다음 예제가 이 구역의 전체 마크업이다.         이 자리 대신 <section class="axe-workspace-context"> 의 **앞 형제**로         세워도 된다 — 그때는 킷의 :not(:first-child) 가드가 패널         min-height 를 되돌려 레일이 상시 스크롤되지 않게 하고, 여백은         .axe-workspace-context__body 래퍼가 준다.         **로컬 padding 을 세우지 말 것** — 여기 이 자리(패널 안 첫 자식)에서는         킷이 head/list/빈-줄에 직접 padding-inline: var(--space-4) 를 주고         run 의 양 끝이 세로 여백을 든다. 반대로 이 자리를 __body 로 감싸는         것도 금지다: 그 클래스는 flex: 1 1 auto 라 남는 높이를 통째로 먹어         ①help 를 바닥으로 밀어낸다. -->    <div class="axe-session-head">…</div>    <ul class="axe-session-list axe-session-list--compact">…</ul>    <!-- ① 항상. ⓪ 다음. 접힘 없음. -->    <div class="axe-workspace-context__help">      <div class="axe-workspace-context__header">        <span class="axe-workspace-context__eyebrow">Current context</span>        <strong class="axe-workspace-context__title">결재 문서</strong>        <p class="axe-workspace-context__summary">승인하면 다음 결재자에게 넘어갑니다.</p>      </div>    </div>    <!-- ② 조건부. 비면 이 노드를 아예 내지 않는다.         복사 텍스트는 핸드셰이크형이고(0.40.0), 오리엔테이션 항목은 refetch 와         독립이라 대상이 없는 화면에서도 선다 — 그때 카드는 "이 서비스 데이터         조회로 바로 들어가는 프롬프트" 가 되고 대상 블록 3줄만 빠진다.         __slot 안은 골든(6-플레이스홀더 템플릿)에 값을 채운 바이트 그대로다. -->    <div class="axe-workspace-context__prompt">      <div class="axe-prompt-card">        <p class="axe-prompt-card__line">[AXE gate] https://gate.axelabs.ai/wf/3f0e4a1c · 법인 axev</p>        <p class="axe-prompt-card__line">대상: gate/[email protected]</p>        <!-- 복사 원본은 보이고 선택 가능해야 한다(실패 시 유일한 수동 경로). -->        <pre class="axe-prompt-card__slot" data-axe-copy-source="prompt"             data-axe-copy-target>(사용자님: 붙여넣고 작업 지시 없이 바로 엔터 치세요)[AXE gate] https://gate.axelabs.ai/wf/3f0e4a1c · 법인 axev이 화면의 대상으로 작업한다.이 대화 세션의 제목을 "gate · &lt;2번에서 읽은 대상의 이름&gt;" 으로 맞춰라 (set_session_title 도구가 있으면; 없으면 건너뛴다). 첫 작업을 받으면 "gate · &lt;작업 한 줄&gt;" 로 바꾼다.1. ~/axe-cli/axe gate guide 를 실행해 그 지침을 따른다.2. 대상을 먼저 읽는다.   대상: gate/[email protected] 3f0e4a1c   현재 상태: ~/axe-cli/axe ref axeref1_eyJpc3M…3. 준비가 끝나면 "준비됐습니다. 어떤 작업을 해볼까요?" 한 줄로 묻고 기다린다. 작업을 받으면 묻지 말고 조회해 답한다.</pre>        <button class="axe-prompt-card__copy" type="button"                data-axe-copy="prompt" aria-label="프롬프트 복사">복사</button>        <p class="axe-prompt-card__status" role="status" data-axe-copy-status></p>        <p class="axe-prompt-card__notice">참조 토큰은 암호가 아니라 인코딩입니다.</p>      </div>    </div>    <!-- ③ 조건부. chat 을 서빙하는 소비자만. 도크 노드는 문서당 1개이고,         비활성 사본은 빈 호스트만 낸다. -->    <div class="axe-workspace-context__dock" data-axe-dock-host>      <form data-axe-dock-root><!-- 소비자 소유 --></form>    </div>    <!-- ④ 선택. 서면 패널 직계 자식의 **마지막**이다(margin-top: auto 라 자리는         언제나 맨 아래다). 정본 문안 = 화면 이동 단축키 안내. 배너·프로모션·         상태 배지의 자리가 아니다. 여기까지가 **닫힌 목록**이다 — 이 다섯 밖의         직계 자식이 서면 소비자 conformance 가 red 다(0.39.0). -->    <div class="axe-workspace-context__footer">⌘K 로 화면 이동</div>  </section></aside>

<!-- 세션 섹션 = ContextPanel@1 의 **슬롯 ⓪** 이다(0.38.3). 우측 패널의 첫     시각 요소이며, 자리는 둘 중 하나다 — .axe-workspace-context 의 첫 자식,     또는 같은 셸 호스트 안에서 그 앞 형제. 배너·헤더·프롬프트 카드·페이지     섹션은 전부 이 아래다. --><!-- ① 레일 — 머리 행 + 한 줄 목록(--compact) --><div class="axe-session-head">  <!-- 타이틀 **태그는 예시일 뿐**이다. 계약은 클래스와 head 행 배치이고,       h2/p/div 중 무엇으로 셀지는 그 페이지의 문서 개요가 정한다       (실제로 cortex=p · gate=div · blueprint=h2 로 선다). -->  <h2 class="axe-workspace-context__section-title">세션</h2>  <!-- <div> 이지 <span> 이 아니다 — <span> 은 phrasing content 만 담을 수 있어       안의 <details> 가 마크업을 무효로 만든다(a > button 을 가른 것과 같은 근거). -->  <div class="axe-session-head__actions">    <!-- 생성 폼은 네이티브 <details>. JS 0 인 소비자가 여닫을 수 있는 유일한         수단이고, 상태가 DOM 에 있으므로 React 소비자도 같은 마크업을 쓴다.         summary 가 곧 28px 아이콘 버튼이다(list-style/마커는 CSS 가 지운다). -->    <details class="axe-session-head__new">      <summary class="axe-session-head__button" aria-label="새 세션">        <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"             fill="none" stroke="currentColor" stroke-width="1.5"             stroke-linecap="round">          <path d="M8 3.5v9M3.5 8h9" />        </svg>      </summary>      <!-- 입력·제출 재료는 이 계약이 주지 않는다 — .axe-input · .axe-btn 조립. -->      <form class="axe-session-head__new-panel" method="post" action="/axe/sessions">        <input class="axe-input" type="text" name="name" required maxlength="400"               placeholder="새 세션 이름" aria-label="새 세션 이름">        <button class="axe-btn axe-btn--sm" type="submit">만들기</button>      </form>    </details>    <!-- 목록 전체로 가는 링크. 슬라이더 두 줄 + 빈 손잡이(어긋난 x 위치). -->    <a class="axe-session-head__button" href="/axe/sessions" aria-label="세션 목록">      <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"           fill="none" stroke="currentColor" stroke-width="1.5"           stroke-linecap="round">        <path d="M2.5 5h4.3M12.2 5h1.3M2.5 11h1.3M9.2 11h4.3" />        <circle cx="9.5" cy="5" r="1.8" />        <circle cx="6.5" cy="11" r="1.8" />      </svg>    </a>  </div></div><ul class="axe-session-list axe-session-list--compact">  <!-- 행 = <li>. 클릭면 = 그 안의 <a>/<button>. 액션 버튼이 링크의 형제로       서야 하므로 둘을 나눈다(<a> 안의 <button> 은 유효하지 않다).       --compact 행은 __meta 를 아예 내지 않는다 — 메타는 링크의 title 로. -->  <li class="axe-session-item axe-session-item--active">    <a class="axe-session-item__link" href="/axe/sessions/9f2c?entity=axec"       aria-current="page" aria-label="결산 자동화 파일럿 — 진행 중"       title="axec · 2시간 전 · 게재 3">      <!-- 도트는 색으로만 말한다 → aria-hidden + 링크의 aria-label 이 짝.           이 짝은 **compact 전용**이다(아래 ② 기본 행은 걸지 않는다). -->      <span class="axe-session-item__dot axe-session-item__dot--active" aria-hidden="true"></span>      <span class="axe-session-item__name">결산 자동화 파일럿</span>    </a>    <!-- 선택. CSS-only 소비자는 생략한다 — 없어도 레이아웃이 깨지지 않는다.         머리의 __actions 와 같은 이유로 <div> 다(이름변경도 <details> 로 열 수         있다). compact 안에서는 높이만 28px 로 캡되므로 글자 버튼은 제 폭대로         서고, 아이콘 재료를 써도 28px 바닥에 걸려 정사각이 된다.         **재료는 아이콘이다.** __actions 는 opacity 로만 숨으므로 라벨 폭이         숨은 동안에도 남는다 — 글자 두 짝("이름"·"복사")이면 ~100px 이 모든         행에서 이름 말줄임을 앞당긴다(아이콘 두 짝은 56px). 동작은 aria-label         이 진다. React 는 RenameIcon · CopyIcon 을 import 한다. -->    <div class="axe-session-item__actions">      <button class="axe-workspace-bar__icon-button" type="button" aria-label="이름 변경">        <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"             fill="none" stroke="currentColor" stroke-width="1.5"             stroke-linecap="round">          <path d="M11.1 2.5 13.5 4.9 5.7 12.7 2.7 13.3 3.3 10.3Z" />          <path d="m3.3 10.3 2.4 2.4" />        </svg>      </button>      <button class="axe-workspace-bar__icon-button" type="button" aria-label="프롬프트 복사">        <svg aria-hidden="true" viewBox="0 0 16 16" width="16" height="16"             fill="none" stroke="currentColor" stroke-width="1.5"             stroke-linecap="round">          <rect x="6" y="6" width="8" height="8" rx="1.6" />          <path d="M10 6V3.6A1.6 1.6 0 0 0 8.4 2H3.6A1.6 1.6 0 0 0 2 3.6v4.8A1.6 1.6 0 0 0 3.6 10H6" />        </svg>      </button>    </div>  </li>  <li class="axe-session-item">    <a class="axe-session-item__link" href="/axe/sessions/41ab?entity=axec"       aria-label="LP 명부 정합성 점검 — 완료" title="axec · 어제 · 게재 1">      <span class="axe-session-item__dot axe-session-item__dot--done" aria-hidden="true"></span>      <span class="axe-session-item__name">LP 명부 정합성 점검</span>    </a>  </li></ul><!-- ①-b 같은 레일, 목록이 비었을 때. <ul> 을 빈 채로 내지 말고 그 자리에 안내     한 줄을 세운다 — 구역 제목만 있고 아래가 비면 "아직 없다" 가 아니라     "고장났다" 로 읽힌다(로딩 실패와 구분되지 않는다). 머리는 그대로 남는다:     생성 버튼은 목록이 비었을 때 가장 필요하다. 문안은 계약이다 — 소비자마다     다른 말을 세우면 같은 셸의 같은 자리가 서비스마다 다른 제품처럼 보인다.     (세션을 아예 서빙하지 않는 표면은 이 문구가 아니라 섹션 전체를 내지     않는다 — "없음" 과 "해당 없음" 은 다른 말이다.) --><div class="axe-session-head">  <h2 class="axe-workspace-context__section-title">세션</h2>  <div class="axe-session-head__actions"><!-- …생성·목록 버튼 그대로… --></div></div><p class="axe-workspace-context__summary">아직 세션이 없습니다.</p><!-- ② 작업면 목록 — 기본(두 줄) 형태. 여기서는 메타를 접을 이유가 없다.     도트가 있으면 __link 가 grid 로 전환돼 도트·이름이 첫 줄, __meta 가 둘째     줄 전폭에 선다(마크업은 compact 와 같고 조판만 CSS 가 가른다). --><ul class="axe-session-list">  <li class="axe-session-item">    <!-- **aria-label 없음.** 걸면 자손 텍스트를 덮어 아래 보이는 메타(배지·         entity·시각·게재수)가 접근 이름에서 통째로 사라진다 — 여기서는 자손         텍스트가 접근 이름의 정본이고, 상태는 가시 배지가 진다. -->    <a class="axe-session-item__link" href="/axe/sessions/41ab?entity=axec">      <!-- 보관 도트는 --active 와 채움이 같아 색으로만 갈린다 → 가시 상태           텍스트를 반드시 병기한다(도트는 그 배지의 장식일 뿐). 병기가 설 자리가           __meta 라, 보관은 이 기본 행의 것이다. -->      <span class="axe-session-item__dot axe-session-item__dot--archived" aria-hidden="true"></span>      <span class="axe-session-item__name">LP 명부 정합성 점검</span>      <span class="axe-session-item__meta">        <span class="axe-badge">보관</span>        <span class="axe-badge">axec</span>        어제 · 게재 1      </span>    </a>  </li></ul><!-- ③ 게재물 피드. 컨테이너는 신설하지 않는다 — .axe-stack 으로 족하다. --><div class="axe-stack axe-stack--gap-4">  <article class="axe-session-post">    <header class="axe-session-post__head">      <span class="axe-session-post__author">회계 담당</span>      <!-- __origin 은 자리만 준다. 배지 재료는 .axe-badge 가 이긴다. -->      <span class="axe-session-post__origin axe-badge axe-badge--info">claude-code@mac-mini</span>      <time class="axe-session-post__time" datetime="2026-08-27T14:02:00+09:00">08-27 14:02</time>    </header>    <!-- 마크다운이면 .axe-prose 를 함께 붙인다(조판은 prose 가 소유). -->    <div class="axe-session-post__body axe-prose">      <p>마감 전표 3건을 재분류했다.</p>    </div>  </article>  <article class="axe-session-post">    <header class="axe-session-post__head">      <span class="axe-session-post__author">회계 담당</span>      <time class="axe-session-post__time" datetime="2026-08-27T15:10:00+09:00">08-27 15:10</time>    </header>    <!-- 렌더러가 없는 소비자는 원문을 이스케이프해 그대로 세운다(개행 보존). -->    <pre class="axe-session-post__body axe-session-post__body--plain">## 마감 전표- 3건 재분류</pre>  </article></div>