Tree View

---
// GENERATED from packages/demos/tree-view/default.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/astro-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.svelte" },
          { id: "input", label: "Input.svelte" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
---

<TreeView items={items} aria-label="Project files" />

// GENERATED from packages/demos/tree-view/default.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/react-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.svelte" },
          { id: "input", label: "Input.svelte" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
export default function DefaultDemo() {
  return <TreeView items={items} aria-label="Project files" />;
}

<script lang="ts">
  // GENERATED from packages/demos/tree-view/default.demo.tsx — edit the source, not this file.
  import TreeView from "@pindoba/svelte-tree-view";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items = [
    {
      id: "src",
      label: "src",
      defaultExpanded: true,
      children: [
        {
          id: "components",
          label: "components",
          children: [
            { id: "button", label: "Button.svelte" },
            { id: "input", label: "Input.svelte" },
          ],
        },
        { id: "app", label: "app.ts" },
      ],
    },
    {
      id: "tests",
      label: "tests",
      children: [{ id: "smoke", label: "smoke.test.ts" }],
    },
    { id: "readme", label: "README.md" },
  ] as TreeNodeInput[];
</script>

<TreeView {items} aria-label="Project files"></TreeView>

<script setup lang="ts">
// GENERATED from packages/demos/tree-view/default.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/vue-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.svelte" },
          { id: "input", label: "Input.svelte" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
</script>

<template>
  <TreeView :items="items" aria-label="Project files"></TreeView>
</template>

// GENERATED from packages/demos/tree-view/default.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/solid-tree-view";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      {
        id: "components",
        label: "components",
        children: [
          { id: "button", label: "Button.svelte" },
          { id: "input", label: "Input.svelte" },
        ],
      },
      { id: "app", label: "app.ts" },
    ],
  },
  {
    id: "tests",
    label: "tests",
    children: [{ id: "smoke", label: "smoke.test.ts" }],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
export default function DefaultDemo() {
  return <TreeView items={items} aria-label="Project files" />;
}

---
// GENERATED from packages/demos/tree-view/sizes.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/astro-tree-view";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
] as TreeNodeInput[];
const sizes = ["sm", "md", "lg"] as TreeViewSize[];
---

<div class={stack({ gap: "md" })}>
  {sizes.map((size) => (
    <TreeView items={items} size={size} aria-label={`Tree ${size}`} />
  ))}
</div>

// GENERATED from packages/demos/tree-view/sizes.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/react-tree-view";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
] as TreeNodeInput[];
const sizes = ["sm", "md", "lg"] as TreeViewSize[];
export default function SizesDemo() {
  return (
    <div className={stack({ gap: "md" })}>
      {sizes.map((size) => (
        <TreeView
          key={size}
          items={items}
          size={size}
          aria-label={`Tree ${size}`}
        />
      ))}
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tree-view/sizes.demo.tsx — edit the source, not this file.
  import TreeView from "@pindoba/svelte-tree-view";
  import { stack } from "@pindoba/styled-system/patterns";
  import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

  const items = [
    {
      id: "root",
      label: "Root",
      defaultExpanded: true,
      children: [
        { id: "a", label: "Child A" },
        { id: "b", label: "Child B" },
      ],
    },
  ] as TreeNodeInput[];
  const sizes = ["sm", "md", "lg"] as TreeViewSize[];
</script>

<div class={stack({ gap: "md" })}>
  {#each sizes as size (size)}
    <TreeView {items} {size} aria-label={`Tree ${size}`}></TreeView>
  {/each}
</div>

<script setup lang="ts">
// GENERATED from packages/demos/tree-view/sizes.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/vue-tree-view";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
] as TreeNodeInput[];
const sizes = ["sm", "md", "lg"] as TreeViewSize[];
</script>

<template>
  <div :class="stack({ gap: 'md' })">
    <TreeView
      v-for="size in sizes"
      :key="size"
      :items="items"
      :size="size"
      :aria-label="`Tree ${size}`"
    ></TreeView>
  </div>
</template>

// GENERATED from packages/demos/tree-view/sizes.demo.tsx — edit the source, not this file.
import { For } from "solid-js";
import { TreeView } from "@pindoba/solid-tree-view";
import { stack } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput, TreeViewSize } from "@pindoba/core-tree-view";

const items = [
  {
    id: "root",
    label: "Root",
    defaultExpanded: true,
    children: [
      { id: "a", label: "Child A" },
      { id: "b", label: "Child B" },
    ],
  },
] as TreeNodeInput[];
const sizes = ["sm", "md", "lg"] as TreeViewSize[];
export default function SizesDemo() {
  return (
    <div class={stack({ gap: "md" })}>
      <For each={sizes}>
        {(size) => (
          <TreeView items={items} size={size} aria-label={`Tree ${size}`} />
        )}
      </For>
    </div>
  );
}

---
// GENERATED from packages/demos/tree-view/inner-radius.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/astro-tree-view";
import Card from "@pindoba/astro-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
---

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
    The tree container is a Panel root, so the default <code>appearance</code>{" "}
    surface takes <code>radius="inner"</code> and curves concentrically with the
    Card around it.
  </p>
  <div class={grid({ columns: 2, gap: "lg" })}>
    <Card size="md" radius="2xl" border="default">
      <TreeView items={items} aria-label="Files, default radius" />
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        Default radius.
      </p>
    </Card>
    <Card size="md" radius="2xl" border="default">
      <TreeView items={items} radius="inner" aria-label="Files, inner radius" />
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        <code>radius="inner"</code>.
      </p>
    </Card>
  </div>
</div>

// GENERATED from packages/demos/tree-view/inner-radius.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/react-tree-view";
import { Card } from "@pindoba/react-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
export default function InnerRadiusDemo() {
  return (
    <div className={stack({ gap: "md", direction: "column", width: "full" })}>
      <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
        The tree container is a Panel root, so the default{" "}
        <code>appearance</code> surface takes <code>radius="inner"</code> and
        curves concentrically with the Card around it.
      </p>
      <div className={grid({ columns: 2, gap: "lg" })}>
        <Card size="md" radius="2xl" border="default">
          <TreeView items={items} aria-label="Files, default radius" />
          <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
            Default radius.
          </p>
        </Card>
        <Card size="md" radius="2xl" border="default">
          <TreeView
            items={items}
            radius="inner"
            aria-label="Files, inner radius"
          />
          <p className={css({ fontSize: "sm", color: "panel.text.muted" })}>
            <code>radius="inner"</code>.
          </p>
        </Card>
      </div>
    </div>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tree-view/inner-radius.demo.tsx — edit the source, not this file.
  import TreeView from "@pindoba/svelte-tree-view";
  import Card from "@pindoba/svelte-card";
  import { css } from "@pindoba/styled-system/css";
  import { stack, grid } from "@pindoba/styled-system/patterns";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items = [
    {
      id: "src",
      label: "src",
      defaultExpanded: true,
      children: [
        { id: "index", label: "index.ts" },
        { id: "types", label: "types.ts" },
      ],
    },
    { id: "readme", label: "README.md" },
  ] as TreeNodeInput[];
</script>

<div class={stack({ gap: "md", direction: "column", width: "full" })}>
  <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
    The tree container is a Panel root, so the default <code> appearance </code>
    surface takes <code> radius="inner" </code> and curves concentrically with the
    Card around it.
  </p>
  <div class={grid({ columns: 2, gap: "lg" })}>
    <Card size="md" radius="2xl" border="default">
      <TreeView {items} aria-label="Files, default radius"></TreeView>
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        Default radius.
      </p>
    </Card>
    <Card size="md" radius="2xl" border="default">
      <TreeView {items} radius="inner" aria-label="Files, inner radius"
      ></TreeView>
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        <code> radius="inner" </code>.
      </p>
    </Card>
  </div>
</div>

<script setup lang="ts">
// GENERATED from packages/demos/tree-view/inner-radius.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/vue-tree-view";
import { Card } from "@pindoba/vue-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
</script>

<template>
  <div :class="stack({ gap: 'md', direction: 'column', width: 'full' })">
    <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
      The tree container is a Panel root, so the default
      <code>appearance</code> surface takes <code>radius="inner"</code> and
      curves concentrically with the Card around it.
    </p>
    <div :class="grid({ columns: 2, gap: 'lg' })">
      <Card size="md" radius="2xl" border="default">
        <TreeView :items="items" aria-label="Files, default radius"></TreeView>
        <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
          Default radius.
        </p>
      </Card>
      <Card size="md" radius="2xl" border="default">
        <TreeView
          :items="items"
          radius="inner"
          aria-label="Files, inner radius"
        ></TreeView>
        <p :class="css({ fontSize: 'sm', color: 'panel.text.muted' })">
          <code>radius="inner"</code>.
        </p>
      </Card>
    </div>
  </div>
</template>

// GENERATED from packages/demos/tree-view/inner-radius.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/solid-tree-view";
import { Card } from "@pindoba/solid-card";
import { css } from "@pindoba/styled-system/css";
import { stack, grid } from "@pindoba/styled-system/patterns";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "src",
    label: "src",
    defaultExpanded: true,
    children: [
      { id: "index", label: "index.ts" },
      { id: "types", label: "types.ts" },
    ],
  },
  { id: "readme", label: "README.md" },
] as TreeNodeInput[];
export default function InnerRadiusDemo() {
  return (
    <div class={stack({ gap: "md", direction: "column", width: "full" })}>
      <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
        The tree container is a Panel root, so the default{" "}
        <code>appearance</code> surface takes <code>radius="inner"</code> and
        curves concentrically with the Card around it.
      </p>
      <div class={grid({ columns: 2, gap: "lg" })}>
        <Card size="md" radius="2xl" border="default">
          <TreeView items={items} aria-label="Files, default radius" />
          <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
            Default radius.
          </p>
        </Card>
        <Card size="md" radius="2xl" border="default">
          <TreeView
            items={items}
            radius="inner"
            aria-label="Files, inner radius"
          />
          <p class={css({ fontSize: "sm", color: "panel.text.muted" })}>
            <code>radius="inner"</code>.
          </p>
        </Card>
      </div>
    </div>
  );
}

---
// GENERATED from packages/demos/tree-view/card-inset.demo.tsx — edit the source, not this file.
import { TreeView } from "@pindoba/astro-tree-view";
import Stamp from "@pindoba/astro-stamp";
import { Folder, FileText, BookOpen } from "@lucide/astro";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "databases",
    label: "Databases",
    defaultExpanded: true,
    children: [
      { id: "failover", label: "Fail over to the replica" },
      { id: "restore", label: "Restore from a snapshot" },
      { id: "bloat", label: "Check table bloat" },
    ],
  },
  {
    id: "networking",
    label: "Networking",
    children: [
      { id: "dns", label: "DNS change not propagating" },
      { id: "tls", label: "Renew a TLS certificate" },
    ],
  },
  { id: "webhooks", label: "Drain stuck webhooks" },
] as TreeNodeInput[];

const created = 0;
const flattenTreeItems = <T extends { children?: T[] }>(
  nodes: readonly T[],
): (T & { hasChildren: boolean })[] =>
  nodes.flatMap((node) => [
    { ...node, hasChildren: (node.children?.length ?? 0) > 0 },
    ...flattenTreeItems(node.children ?? []),
  ]);
---

<template data-ir-root="tree-view/card-inset"></template>
<TreeView
  items={items}
  card={{
    heading: "Runbooks",
    subheading: "Step-by-step fixes for on-call engineers",
    background: "surface.base",
    contentBackground: "surface.peak",
    border: "default",
    footer: { leading: "6 runbooks · reviewed every quarter" },
  }}
  data-ir="1"
>
  <Stamp slot="card-leading" emphasis="ghost" size="md">
    <BookOpen />
  </Stamp>
  {flattenTreeItems(items).map((item) => (
    <Fragment slot={`${item.id}:leading`}>
      <Stamp emphasis="ghost" size="sm">
        {item.hasChildren ? (
          <>
            <Folder />
          </>
        ) : (
          <>
            <FileText />
          </>
        )}
      </Stamp>
    </Fragment>
  ))}
</TreeView>
<!--ir:3-->
{created > 0 && (
  <p>
    Drafts started: <!--ir:4-->
    {created}
    <!--/ir-->
  </p>
)}
<!--/ir-->
<template data-ir-root="tree-view/card-inset"></template>

<script>
  import { hydrate } from "./_client/card-inset.ts";

  const roots = [
    ...document.querySelectorAll('[data-ir-root="tree-view/card-inset"]'),
  ];
  for (let i = 0; i < roots.length; i += 2) hydrate(roots.slice(i, i + 2));
</script>

// GENERATED from packages/demos/tree-view/card-inset.demo.tsx — edit the source, not this file.
import { useState } from "react";
import { TreeView } from "@pindoba/react-tree-view";
import { Button } from "@pindoba/react-button";
import { Stamp } from "@pindoba/react-stamp";
import { BookOpen } from "lucide-react";
import { Plus } from "lucide-react";
import { Folder } from "lucide-react";
import { FileText } from "lucide-react";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "databases",
    label: "Databases",
    defaultExpanded: true,
    children: [
      { id: "failover", label: "Fail over to the replica" },
      { id: "restore", label: "Restore from a snapshot" },
      { id: "bloat", label: "Check table bloat" },
    ],
  },
  {
    id: "networking",
    label: "Networking",
    children: [
      { id: "dns", label: "DNS change not propagating" },
      { id: "tls", label: "Renew a TLS certificate" },
    ],
  },
  { id: "webhooks", label: "Drain stuck webhooks" },
] as TreeNodeInput[];
export default function CardInsetDemo() {
  const [created, setCreated] = useState(0);
  const bookStamp = (
    <Stamp emphasis="ghost" size="md">
      <BookOpen />
    </Stamp>
  );
  const newRunbook = (onCreate: () => void) => (
    <Button emphasis="ghost" size="sm" onClick={onCreate}>
      <Plus />
      New runbook
    </Button>
  );

  return (
    <>
      <TreeView
        items={items}
        card={{
          heading: "Runbooks",
          subheading: "Step-by-step fixes for on-call engineers",
          leading: bookStamp,
          trailing: newRunbook(() => {
            let created_ = created;
            return (setCreated((created_ += 1)), created_);
          }),
          background: "surface.base",
          contentBackground: "surface.peak",
          border: "default",
          footer: { leading: "6 runbooks · reviewed every quarter" },
        }}
        leading={(item) => (
          <Stamp emphasis="ghost" size="sm">
            {item.hasChildren ? <Folder /> : <FileText />}
          </Stamp>
        )}
      />
      {created > 0 && <p>Drafts started: {created}</p>}
    </>
  );
}

<script lang="ts">
  // GENERATED from packages/demos/tree-view/card-inset.demo.tsx — edit the source, not this file.
  import TreeView from "@pindoba/svelte-tree-view";
  import Button from "@pindoba/svelte-button";
  import Stamp from "@pindoba/svelte-stamp";
  import LucideFolder from "@lucide/svelte/icons/folder";
  import LucideFileText from "@lucide/svelte/icons/file-text";
  import LucideBookOpen from "@lucide/svelte/icons/book-open";
  import LucidePlus from "@lucide/svelte/icons/plus";
  import type { TreeNodeInput } from "@pindoba/core-tree-view";

  const items = [
    {
      id: "databases",
      label: "Databases",
      defaultExpanded: true,
      children: [
        { id: "failover", label: "Fail over to the replica" },
        { id: "restore", label: "Restore from a snapshot" },
        { id: "bloat", label: "Check table bloat" },
      ],
    },
    {
      id: "networking",
      label: "Networking",
      children: [
        { id: "dns", label: "DNS change not propagating" },
        { id: "tls", label: "Renew a TLS certificate" },
      ],
    },
    { id: "webhooks", label: "Drain stuck webhooks" },
  ] as TreeNodeInput[];

  let created = $state(0);
</script>

{#snippet newRunbook1()}{@render newRunbook(() => (created += 1))}{/snippet}
{#snippet bookStamp()}
  <Stamp emphasis="ghost" size="md">
    <LucideBookOpen />
  </Stamp>
{/snippet}
{#snippet newRunbook(onCreate: () => void)}
  <Button emphasis="ghost" size="sm" onclick={onCreate}>
    <LucidePlus />New runbook
  </Button>
{/snippet}

<TreeView
  {items}
  card={{
    heading: "Runbooks",
    subheading: "Step-by-step fixes for on-call engineers",
    leading: bookStamp,
    trailing: newRunbook1,
    background: "surface.base",
    contentBackground: "surface.peak",
    border: "default",
    footer: { leading: "6 runbooks · reviewed every quarter" },
  }}
>
  {#snippet leading(item)}
    <Stamp emphasis="ghost" size="sm">
      {#if item.hasChildren}
        <LucideFolder />
      {:else}
        <LucideFileText />
      {/if}
    </Stamp>
  {/snippet}
</TreeView>
{#if created > 0}
  <p>
    Drafts started: {created}
  </p>
{/if}

<script setup lang="ts">
// GENERATED from packages/demos/tree-view/card-inset.demo.tsx — edit the source, not this file.
import { h, ref } from "vue";
import { TreeView } from "@pindoba/vue-tree-view";
import { Button } from "@pindoba/vue-button";
import { Stamp } from "@pindoba/vue-stamp";
import type { TreeNodeInput } from "@pindoba/core-tree-view";

const items = [
  {
    id: "databases",
    label: "Databases",
    defaultExpanded: true,
    children: [
      { id: "failover", label: "Fail over to the replica" },
      { id: "restore", label: "Restore from a snapshot" },
      { id: "bloat", label: "Check table bloat" },
    ],
  },
  {
    id: "networking",
    label: "Networking",
    children: [
      { id: "dns", label: "DNS change not propagating" },
      { id: "tls", label: "Renew a TLS certificate" },
    ],
  },
  { id: "webhooks", label: "Drain stuck webhooks" },
] as TreeNodeInput[];

const bookStamp = h(Stamp, { emphasis: "ghost", size: "md" }, () =>
  h(
    "svg",
    {
      xmlns: "http://www.w3.org/2000/svg",
      width: "24",
      height: "24",
      viewBox: "0 0 24 24",
      fill: "none",
      stroke: "currentColor",
      "stroke-width": "2",
      "stroke-linecap": "round",
      "stroke-linejoin": "round",
      class: "lucide lucide-book-open",
      "aria-hidden": "true",
    },
    [
      h("path", { d: "M12 5v16" }),
      h("path", {
        d: "M20.001 19A2 2 0 0022 17V5a2 2 0 00-1.999-2L16 3.002A5 5 0 0012 5a5 5 0 00-4-2H4a2 2 0 00-2 2v12a2 2 0 001.999 2H8a5 5 0 014 2 5 5 0 014-2z",
      }),
    ],
  ),
);
const NewRunbook = ({ onCreate }: { onCreate: () => void }) =>
  h(Button, { emphasis: "ghost", size: "sm", onClick: onCreate }, () => [
    h(
      "svg",
      {
        xmlns: "http://www.w3.org/2000/svg",
        width: "24",
        height: "24",
        viewBox: "0 0 24 24",
        fill: "none",
        stroke: "currentColor",
        "stroke-width": "2",
        "stroke-linecap": "round",
        "stroke-linejoin": "round",
        class: "lucide lucide-plus",
        "aria-hidden": "true",
      },
      [h("path", { d: "M5 12h14" }), h("path", { d: "M12 5v14" })],
    ),
    "New runbook",
  ]);

const created = ref(0);
</script>

<template>
  <TreeView
    :items="items"
    :card="{
      heading: 'Runbooks',
      subheading: 'Step-by-step fixes for on-call engineers',
      leading: bookStamp,
      trailing: h(NewRunbook, { onCreate: () => (created += 1) }),
      background: 'surface.base',
      contentBackground: 'surface.peak',
      border: 'default',
      footer: { leading: '6 runbooks · reviewed every quarter' },
    }"
    :leading="
      (item) =>
        h(Stamp, { emphasis: 'ghost', size: 'sm' }, () =>
          item.hasChildren
            ? h(
                'svg',
                {
                  xmlns: 'http://www.w3.org/2000/svg',
                  width: '24',
                  height: '24',
                  viewBox: '0 0 24 24',
                  fill: 'none',
                  stroke: 'currentColor',
                  'stroke-width': '2',
                  'stroke-linecap': 'round',
                  'stroke-linejoin': 'round',
                  class: 'lucide lucide-folder',
                  'aria-hidden': 'true',
                },
                [
                  h('path', {
                    d: 'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z',
                  }),
                ],
              )
            : h(
                'svg',
                {
                  xmlns: 'http://www.w3.org/2000/svg',
                  width: '24',
                  height: '24',
                  viewBox: '0 0 24 24',
                  fill: 'none',
                  stroke: 'currentColor',
                  'stroke-width': '2',
                  'stroke-linecap': 'round',
                  'stroke-linejoin': 'round',
                  class: 'lucide lucide-file-text',
                  'aria-hidden': 'true',
                },
                [
                  h('path', {
                    d: 'M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z',
                  }),
                  h('path', { d: 'M14 2v5a1 1 0 0 0 1 1h5' }),
                  h('path', { d: 'M10 9H8' }),
                  h('path', { d: 'M16 13H8' }),
                  h('path', { d: 'M16 17H8' }),
                ],
              ),
        )
    "
  />
  <p v-if="created > 0">Drafts started: {{ created }}</p>
</template>