HMDesign/packages/sw/ai/examples/ExampleH-ViewerMode.tsx

// Example H — viewer mode: SWViewerHeader (data-driven menu) + SWViewerPanel popups with free content.
// Only public components. The program owns the state and the commands; the package owns the look and the
// open / close / focus / keyboard / drag behavior. Icons are the program's own (16px, currentColor).
import { useState } from "react"
import {
  SWViewerButton, SWViewerField, SWViewerHeader, SWViewerHeaderButton, SWViewerHint, SWViewerInput, SWViewerPanel,
  SWViewerSection, SWViewerSlider, SWViewerStatus, SWViewerSwitch,
  type SWViewerHeaderGroup,
} from "@hm-design/sw"

const Icon = ({ d }: { d: string }) => (
  <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true"><path d={d} /></svg>
)
const icons = {
  open: <Icon d="M3 7h6l2 2h10v10H3z" />,
  fit: <Icon d="M3 8V3h5M16 3h5v5M21 16v5h-5M8 21H3v-5" />,
  layers: <Icon d="M12 3l9 5-9 5-9-5 9-5zM3 13l9 5 9-5" />,
  options: <Icon d="M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0" />,
  info: <Icon d="M12 8h.01M11 12h1v5h1M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18z" />,
}

export function ExampleHViewerMode({ onEvent }: { onEvent?: (name: string) => void }) {
  const [fileName, setFileName] = useState<string | null>(null)
  const [space, setSpace] = useState("model")
  const [depth, setDepth] = useState(false)
  const [panels, setPanels] = useState({ layers: false, options: false })
  const [grid, setGrid] = useState(true)
  const [zoomSpeed, setZoomSpeed] = useState(1)
  const [about, setAbout] = useState(false)

  const groups: SWViewerHeaderGroup[] = [
    { id: "file", label: "파일", items: [
      { type: "button", id: "open", label: "파일 열기", icon: icons.open, iconOnlyBelow: 560 },
      { type: "menu", id: "samples", label: "샘플", moreLabel: "샘플 도면", collapseBelow: 1180, entries: [
        { type: "item", id: "sample-a", label: "기본 도면 · DWG", onSelect: () => setFileName("BasicSample.dwg") },
        { type: "submenu", id: "recent", label: "최근 도면", entries: [{ type: "item", id: "recent-1", label: "simple.dxf", onSelect: () => setFileName("simple.dxf") }] },
      ] },
    ] },
    { id: "space", label: "도면 공간", surface: "field", hidden: !fileName, items: [
      { type: "tabs", id: "space", label: "모델과 배치 선택", collapseBelow: 1180, value: space, onValueChange: setSpace,
        options: [{ value: "model", label: "Model", count: 1200 }, { value: "layout", label: "Layout", count: 40 }] },
    ] },
    { id: "view", label: "화면 보기", surface: "field", items: [
      { type: "button", id: "fit", label: "전체 보기", icon: icons.fit, iconOnlyBelow: 560, disabled: !fileName },
      { type: "switch", id: "depth", label: "2.5D", checked: depth, collapseBelow: 1180, onCheckedChange: setDepth },
    ] },
    { id: "panels", label: "패널", placement: "end", items: [
      { type: "toggle", id: "layers", label: "레이어", icon: icons.layers, pressed: panels.layers, collapseBelow: 900, onPressedChange: layers => setPanels({ ...panels, layers }) },
      { type: "toggle", id: "options", label: "설정", icon: icons.options, pressed: panels.options, collapseBelow: 900, onPressedChange: options => setPanels({ ...panels, options }) },
    ] },
  ]

  return (
    <>
      {/* No logo prop: nothing is drawn on the cap (no "HM" text). Pass logoSrc / logo to show the program's logo. */}
      <SWViewerHeader documentTitle={fileName} groups={groups}
        onCommand={command => onEvent?.(`${command.itemId}/${command.id}${command.value === undefined ? "" : `=${String(command.value)}`}`)}
        trailing={<>
          <SWViewerStatus state={fileName ? "ready" : "idle"} />
          <SWViewerHeaderButton iconOnly icon={icons.info} label="정보" onClick={() => setAbout(true)} />
        </>} />

      <SWViewerPanel title="레이어" icon={icons.layers} open={panels.layers} onClose={() => setPanels({ ...panels, layers: false })}>
        <SWViewerSection surface="plain" aria-label="레이어 목록">
          <SWViewerHint>프로그램의 레이어 목록을 여기에 둡니다.</SWViewerHint>
        </SWViewerSection>
      </SWViewerPanel>

      <SWViewerPanel title="옵션" icon={icons.options} open={panels.options} onClose={() => setPanels({ ...panels, options: false })} width={340} height="auto" inset={{ side: 356 }}
        footer={<SWViewerButton variant="primary" onClick={() => { onEvent?.("options:apply"); setPanels({ ...panels, options: false }) }}>적용</SWViewerButton>}>
        <SWViewerSection title="표시">
          <SWViewerField label="그리드">{id => <SWViewerSwitch id={id} checked={grid} onCheckedChange={setGrid} />}</SWViewerField>
          <SWViewerField label="줌 속도" layout="stacked" below={<SWViewerSlider aria-label="줌 속도" value={zoomSpeed} min={0.2} max={3} step={0.1} onValueChange={setZoomSpeed} />}>
            {id => <SWViewerInput id={id} type="number" min={0.2} max={3} step={0.1} value={zoomSpeed} onChange={event => setZoomSpeed(Number(event.currentTarget.value))} />}
          </SWViewerField>
        </SWViewerSection>
      </SWViewerPanel>

      <SWViewerPanel modal title="정보" open={about} onClose={() => setAbout(false)} width={360} height="auto" resizable={false} collapsible={false}
        footer={<SWViewerButton variant="primary" onClick={() => setAbout(false)}>확인</SWViewerButton>}>
        <SWViewerHint>모듈 구성과 라이선스 고지는 프로그램이 제공합니다.</SWViewerHint>
      </SWViewerPanel>
    </>
  )
}