26:T99f1,
type Layer = {
  id: string
  name: string
  kind: "frame" | "group" | "shape" | "text" | "image"
  hidden?: boolean
  locked?: boolean
  children?: Layer[]
}

const LAYERS: Layer[] = [
  {
    id: "hero",
    name: "hero",
    kind: "frame",
    children: [
      { id: "title", name: "title", kind: "text" },
      { id: "kicker", name: "kicker", kind: "text", hidden: true },
      {
        id: "card",
        name: "card",
        kind: "group",
        children: [
          { id: "still", name: "still", kind: "image" },
          { id: "scrim", name: "scrim", kind: "shape", locked: true },
          { id: "caption", name: "caption", kind: "text" },
        ],
      },
      { id: "ground", name: "ground", kind: "shape", locked: true },
    ],
  },
  { id: "notes", name: "notes", kind: "frame", children: [] },
]

const LAYER_ICON = {
  frame: ICONS.frame,
  group: ICONS.group,
  shape: ICONS.shape,
  text: ICONS.text,
  image: ICONS.image,
}

/** The forest with one layer changed. */
const patch = (
  layers: Layer[],
  id: string,
  change: (l: Layer) => Layer,
): Layer[] =>
  layers.map((l) =>
    l.id === id
      ? change(l)
      : l.children
        ? { ...l, children: patch(l.children, id, change) }
        : l,
  )

function Layers() {
  const [layers, setLayers] = React.useState(LAYERS)
  const [selected, setSelected] = React.useState<string[]>([])
  const flip = (id: string, key: "hidden" | "locked") =>
    setLayers((ls) => patch(ls, id, (l) => ({ ...l, [key]: !l[key] })))
  return (
    <div className={PANEL}>
      <Tree
        aria-label="layers"
        items={layers}
        label={(l) => l.name}
        icon={(l) => {
          const Icon = LAYER_ICON[l.kind]
          return <Icon />
        }}
        dimmed={(l) => !!l.hidden}
        actions={(l) => (
          <>
            <TreeAction
              label={l.locked ? "unlock" : "lock"}
              pinned={l.locked}
              onClick={() => flip(l.id, "locked")}
            >
              {l.locked ? <ICONS.lock /> : <ICONS.unlock />}
            </TreeAction>
            <TreeAction
              label={l.hidden ? "show" : "hide"}
              pinned={l.hidden}
              onClick={() => flip(l.id, "hidden")}
            >
              {l.hidden ? <ICONS.eyeOff /> : <ICONS.eye />}
            </TreeAction>
          </>
        )}
        // Figma's keys: ⌘⇧H hides, ⌘⇧L locks.
        onRowKeyDown={(l, e) => {
          if (!(e.metaKey || e.ctrlKey) || !e.shiftKey) return
          const key = e.key.toLowerCase()
          if (key === "h" || key === "l") {
            e.preventDefault()
            flip(l.id, key === "h" ? "hidden" : "locked")
          }
        }}
        selection="multi"
        selected={selected}
        onSelectedChange={setSelected}
        defaultExpanded={["hero", "card"]}
        onRename={(l, name) =>
          setLayers((ls) => patch(ls, l.id, (x) => ({ ...x, name })))
        }
        // Only frames and groups hold layers.
        canDrop={(_, target, drop: Drop) =>
          drop !== "inside" || target.children !== undefined
        }
        onMove={(ids, target, drop) =>
          setLayers((ls) => moveNodes(ls, ids, target, drop))
        }
        guides
      />
    </div>
  )
}

<Layers />
25:["$","div",null,{"className":"ag-code-scroll ag-edge-fade-xy","dangerouslySetInnerHTML":{"__html":"$26"}}]