contain-css-svelte 1.1.4 → 1.1.6

package/dist/review/scenarios/TableWorkbench.svelte

@@ -11,115 +11,115 @@ import Table from "../../layout/Table.svelte";
 import TextLayout from "../../typography/TextLayout.svelte";
 const rows = [
     {
-        id: "PLT-1042",
-        task: "Stabilize SSO callback handling",
-        owner: "TS",
-        team: "Platform",
+        id: "BOX-1042",
+        task: "Define box as the square diplomat of containment",
+        owner: "BX",
+        team: "Boxes",
         priority: "P0",
         status: "Blocked",
         due: "Today",
     },
     {
-        id: "MKT-221",
-        task: "QA campaign attribution dashboard",
-        owner: "AL",
-        team: "Marketing",
+        id: "BIN-221",
+        task: "Compare open bins with lids, labels, and mild ambition",
+        owner: "BN",
+        team: "Bins",
         priority: "P1",
         status: "In Review",
         due: "Tomorrow",
     },
     {
-        id: "OPS-878",
-        task: "Backfill support SLA alerts",
-        owner: "RJ",
-        team: "Operations",
+        id: "BBL-878",
+        task: "Separate barrels from casks without starting a cellar debate",
+        owner: "BR",
+        team: "Barrels",
         priority: "P1",
         status: "In Progress",
         due: "Tue",
     },
     {
-        id: "PLT-1048",
-        task: "Ship migration retry banner copy",
-        owner: "HS",
-        team: "Platform",
+        id: "CRT-1048",
+        task: "Cross-reference crate with shipping, fruit, and stage magic",
+        owner: "CR",
+        team: "Crates",
         priority: "P2",
         status: "Ready",
         due: "Tue",
     },
     {
-        id: "DS-55",
-        task: "Audit density tokens for compact mode",
-        owner: "AL",
-        team: "Design",
+        id: "CAN-55",
+        task: "Audit canister, tin, and can for pantry precision",
+        owner: "CN",
+        team: "Cans",
         priority: "P2",
         status: "In Progress",
         due: "Wed",
     },
     {
-        id: "OPS-881",
-        task: "Resolve duplicate webhook replay jobs",
-        owner: "RJ",
-        team: "Operations",
+        id: "TUB-881",
+        task: "Resolve whether a tub is a bin taking a bath",
+        owner: "TB",
+        team: "Bins",
         priority: "P0",
         status: "Blocked",
         due: "Wed",
     },
     {
-        id: "SUP-399",
-        task: "Update admin troubleshooting macros",
-        owner: "MK",
-        team: "Support",
+        id: "JAR-399",
+        task: "Update jar notes for pickles, buttons, and tiny CSS tokens",
+        owner: "JR",
+        team: "Jars",
         priority: "P3",
         status: "Done",
         due: "Thu",
     },
     {
-        id: "PLT-1054",
-        task: "Instrument CSV export completion events",
-        owner: "TS",
-        team: "Platform",
+        id: "DRM-1054",
+        task: "Instrument drum definitions for industrial rhythm",
+        owner: "DM",
+        team: "Barrels",
         priority: "P1",
         status: "In Review",
         due: "Thu",
     },
     {
-        id: "MKT-228",
-        task: "Finalize launch checklist for webinar",
-        owner: "JD",
-        team: "Marketing",
+        id: "TTE-228",
+        task: "Finalize tote entry for handles, errands, and library books",
+        owner: "TT",
+        team: "Totes",
         priority: "P2",
         status: "Ready",
         due: "Fri",
     },
     {
-        id: "DS-61",
-        task: "Review icon sizing on navigation rails",
-        owner: "HS",
-        team: "Design",
+        id: "VLT-61",
+        task: "Review vault as the dramatic cousin of a lockbox",
+        owner: "VT",
+        team: "Boxes",
         priority: "P3",
         status: "In Progress",
         due: "Fri",
     },
     {
-        id: "OPS-889",
-        task: "Reconcile nightly inventory drift report",
-        owner: "RJ",
-        team: "Operations",
+        id: "AMP-889",
+        task: "Reconcile amphora with vase, urn, and ancient snack jar",
+        owner: "AM",
+        team: "Jars",
         priority: "P2",
         status: "In Progress",
         due: "Next Mon",
     },
     {
-        id: "SUP-405",
-        task: "Publish escalation policy revision",
-        owner: "MK",
-        team: "Support",
+        id: "PKT-405",
+        task: "Publish packet notes for envelopes, sachets, and tiny payloads",
+        owner: "PK",
+        team: "Pouches",
         priority: "P2",
         status: "Ready",
         due: "Next Mon",
     },
 ];
-let query = $state("a");
+let query = $state("");
 let team = $state("all");
 let showClosed = $state(false);
 let bulkActionsOpen = $state(false);
@@ -190,7 +190,7 @@ function getCssLengthValue(node, property) {
   {#snippet header()}
     <Bar primary>
       <div>
-        <h1>Operations Table</h1>
+        <h1>Container Reference Table</h1>
       </div>
 
       <div>
@@ -199,7 +199,7 @@ function getCssLengthValue(node, property) {
           aria-expanded={bulkActionsOpen}
           onclick={toggleBulkActions}
         >
-          {bulkActionsOpen ? "Hide Actions" : "Bulk Actions"}
+          {bulkActionsOpen ? "Hide Actions" : "Reference Actions"}
         </Button>
         <Button secondary>Refresh</Button>
       </div>
@@ -207,36 +207,44 @@ function getCssLengthValue(node, property) {
   {/snippet}
 
   <TextLayout>
-    <h1>Sticky table workbench</h1>
+    <h1>Thesaurus of things that contain other things</h1>
     <p>
-      This scenario exercises filters, an action bar, and a sticky-header table
-      with enough rows to expose scrolling behavior.
+      A container may be humble or ceremonial, disposable or heirloom, open to
+      the air or sealed against weather. This reference table catalogs boxes,
+      bins, barrels, jars, pouches, crates, drums, and every other noun that
+      wants to keep a smaller noun from rolling away.
     </p>
 
     <Form layout="above" fullWidth globalInputStyles>
       <Fieldset>
         {#snippet legend()}
-          Filters
+          Reference Filters
         {/snippet}
 
         <FormItem>
           {#snippet label()}
-            Search Queue
+            Search Terms
           {/snippet}
-          <Input bind:value={query} placeholder="Search by task, team, or owner" />
+          <Input
+            bind:value={query}
+            placeholder="Search by container, family, or curator"
+          />
         </FormItem>
 
         <FormItem>
           {#snippet label()}
-            Team
+            Family
           {/snippet}
-          <Select bind:value={team}>
-            <option value="all">All teams</option>
-            <option value="Platform">Platform</option>
-            <option value="Marketing">Marketing</option>
-            <option value="Operations">Operations</option>
-            <option value="Design">Design</option>
-            <option value="Support">Support</option>
+          <Select bind:value={team} data-audit-action="open-team-select">
+            <option value="all">All families</option>
+            <option value="Boxes">Boxes</option>
+            <option value="Bins">Bins</option>
+            <option value="Barrels">Barrels</option>
+            <option value="Crates">Crates</option>
+            <option value="Cans">Cans</option>
+            <option value="Jars">Jars</option>
+            <option value="Totes">Totes</option>
+            <option value="Pouches">Pouches</option>
           </Select>
         </FormItem>
 
@@ -244,7 +252,7 @@ function getCssLengthValue(node, property) {
           {#snippet label()}
             Visibility
           {/snippet}
-          <Checkbox bind:checked={showClosed}>Include completed work</Checkbox>
+          <Checkbox bind:checked={showClosed}>Include archived definitions</Checkbox>
         </FormItem>
       </Fieldset>
     </Form>
@@ -252,11 +260,11 @@ function getCssLengthValue(node, property) {
     {#if bulkActionsOpen}
       <div data-audit-target="bulk-actions-open">
         <Bar secondary>
-          <div>{filteredRows.length} selected for scheduling review</div>
+          <div>{filteredRows.length} selected for lexical containment review</div>
           <div>
-            <Button success>Assign Owner</Button>
-            <Button warning>Snooze</Button>
-            <Button danger>Escalate</Button>
+            <Button success>Assign Curator</Button>
+            <Button warning>Shelve</Button>
+            <Button danger>Dispute Term</Button>
           </div>
         </Bar>
       </div>
@@ -278,7 +286,7 @@ function getCssLengthValue(node, property) {
           >
             Scroll Preview
           </Button>
-          <Button info>Export CSV</Button>
+          <Button info>Export Glossary</Button>
         </div>
       </Bar>
 
@@ -287,9 +295,9 @@ function getCssLengthValue(node, property) {
       {#snippet thead()}
         <thead>
           <tr>
-            <th>Task</th>
-            <th>Owner</th>
-            <th>Team</th>
+            <th>Entry</th>
+            <th>Curator</th>
+            <th>Family</th>
             <th>Priority</th>
             <th>Status</th>
             <th>Due</th>

package/dist/review/scenarios/VisualSystemBoard.svelte

@@ -0,0 +1,387 @@
+<script lang="ts">import Card from "../../Card.svelte";
+import Button from "../../controls/Button.svelte";
+import Checkbox from "../../controls/Checkbox.svelte";
+import Input from "../../controls/Input.svelte";
+import RadioButton from "../../controls/RadioButton.svelte";
+import Select from "../../controls/Select.svelte";
+import Slider from "../../controls/Slider.svelte";
+import Toggle from "../../controls/Toggle.svelte";
+import DropdownMenu from "../../dropdowns/DropdownMenu.svelte";
+import Bar from "../../layout/Bar.svelte";
+import Container from "../../layout/Container.svelte";
+import DataList from "../../layout/DataList.svelte";
+import DataListItem from "../../layout/DataListItem.svelte";
+import Fieldset from "../../layout/Fieldset.svelte";
+import Form from "../../layout/Form.svelte";
+import FormItem from "../../layout/FormItem.svelte";
+import GridLayout from "../../layout/GridLayout.svelte";
+import Inline from "../../layout/Inline.svelte";
+import Page from "../../layout/Page.svelte";
+import Stack from "../../layout/Stack.svelte";
+import Table from "../../layout/Table.svelte";
+import Progress from "../../misc/Progress.svelte";
+import Tag from "../../misc/Tag.svelte";
+import Dialog from "../../overlays/Dialog.svelte";
+import TextLayout from "../../typography/TextLayout.svelte";
+const members = [
+    {
+        name: "Avery Crate",
+        role: "Box model curator",
+        status: "Approved",
+        intent: "success",
+    },
+    {
+        name: "Mina Can",
+        role: "Canister operations",
+        status: "Reviewing",
+        intent: "warning",
+    },
+    {
+        name: "Jon Barrel",
+        role: "Cargo product",
+        status: "Queued",
+        intent: "info",
+    },
+];
+const rhythm = [
+    { label: "Crate contrast", value: 84 },
+    { label: "Seal separation", value: 68 },
+    { label: "Manifest density", value: 72 },
+    { label: "Cargo hierarchy", value: 91 },
+];
+const rows = [
+    [
+        "Lids",
+        "Primary, secondary, and emergency closures for decisive sealing",
+        "Sealed",
+    ],
+    [
+        "Walls",
+        "Panel seams, bin edges, manifest rows, and dividers that hold the line",
+        "Inspect",
+    ],
+    [
+        "Manifests",
+        "Search fields, selectors, toggles, and sliders for cargo edits",
+        "Sealed",
+    ],
+    [
+        "Stacks",
+        "Bars, cards, lists, inline controls, and ledgers stacked like tidy bins",
+        "Sealed",
+    ],
+];
+let plan = $state("growth");
+let density = $state("balanced");
+let includeArchived = $state(false);
+let notifications = $state(true);
+let confidence = $state(72);
+let owner = $state("design");
+let search = $state("crate polish");
+let detailOpen = $state(false);
+let dialogOpen = $state(false);
+let confidenceLabel = $derived(confidence > 80 ? "High" : confidence > 55 ? "Medium" : "Low");
+function openDetail() {
+    detailOpen = true;
+}
+function openDialog() {
+    dialogOpen = true;
+}
+</script>
+
+<Page data-audit-target="page">
+  {#snippet header()}
+    <Bar primary height="auto">
+      <Stack gap="0">
+        <small>Workspace</small>
+        <h1>Contain Depot Board</h1>
+      </Stack>
+
+      <Inline wrap="wrap">
+        <DropdownMenu triggerAuditAction="open-actions-menu">
+          {#snippet label()}
+            Actions
+          {/snippet}
+          <li><button type="button">Share snapshot</button></li>
+          <li><button type="button">Create inspection note</button></li>
+          <li><button type="button">Export comparison</button></li>
+        </DropdownMenu>
+        <Button data-audit-action="open-dialog" primary onclick={openDialog}>
+          Preview
+        </Button>
+      </Inline>
+    </Bar>
+  {/snippet}
+
+  <Container maxWidth="1180px">
+    <Stack gap="var(--space-lg)">
+      <TextLayout>
+        <h2>Contain depot board</h2>
+        <h1>Lids, walls, manifests, and stacks in one cargo view</h1>
+        <p>
+          Welcome to the Contain depot, where ship manifests, policy memos,
+          retail storage reports, and old-fashioned box glossaries arrive at the
+          same inspection desk. Every crate earns a label, every label earns a
+          little skepticism, and every suspicious lid is asked politely to close
+          before the evening whistle.
+        </p>
+      </TextLayout>
+
+      <GridLayout card>
+        <Card>
+          {#snippet header()}
+            <h3>Readiness</h3>
+          {/snippet}
+          <h2>84%</h2>
+          <p>
+            Eight of ten containment checks are sealed and stacked. The
+            remaining issues are ordinary yard dents: one crate has a soft
+            corner, one manifest line needs more breathing room, and one label
+            has been warned not to drift into international waters.
+          </p>
+          {#snippet footer()}
+            <Inline wrap="wrap">
+              <Tag success>Passing</Tag>
+              <Tag info>{confidenceLabel}</Tag>
+            </Inline>
+          {/snippet}
+        </Card>
+
+        <Card>
+          {#snippet header()}
+            <h3>Closure Set</h3>
+          {/snippet}
+          <Stack gap="var(--space)">
+            <Inline wrap="wrap">
+              <Button primary data-audit-action="focus-primary" data-audit-focus="true">
+                Seal
+              </Button>
+              <Button secondary>Hold</Button>
+            </Inline>
+            <Inline wrap="wrap">
+              <Button success>Clear</Button>
+              <Button warning>Delay</Button>
+              <Button danger>Reject</Button>
+            </Inline>
+          </Stack>
+        </Card>
+
+        <Card>
+          {#snippet header()}
+            <h3>Yard Rhythm</h3>
+          {/snippet}
+          <p>
+            These progress rows track the practical rhythm of the yard: contrast
+            between crates, separation between seals, density on the manifest,
+            and hierarchy in the cargo stack. A good depot never lets a barrel
+            pretend it is a filing cabinet.
+          </p>
+          <Stack gap="var(--space)">
+            {#each rhythm as item}
+              <div>
+                <strong>{item.label}</strong>
+                <Progress value={item.value} max={100}>{item.value}%</Progress>
+              </div>
+            {/each}
+          </Stack>
+        </Card>
+      </GridLayout>
+
+      <GridLayout>
+        <Container border data-audit-target="form-panel">
+          <Bar secondary>
+            <h2>Filters</h2>
+            <Toggle bind:checked={notifications}>Alerts</Toggle>
+          </Bar>
+
+          <Form layout="above" fullWidth globalInputStyles>
+            <Fieldset>
+              {#snippet legend()}
+                Search and segmentation
+              {/snippet}
+
+              <FormItem>
+                {#snippet label()}
+                  Search
+                {/snippet}
+                <Input
+                  bind:value={search}
+                  placeholder="Find a crate, seal, or manifest"
+                />
+              </FormItem>
+
+              <FormItem>
+                {#snippet label()}
+                  Container
+                {/snippet}
+                <Select bind:value={plan}>
+                  <option value="starter">Lunchbox</option>
+                  <option value="growth">Shipping crate</option>
+                  <option value="enterprise">Freight container</option>
+                </Select>
+              </FormItem>
+
+              <FormItem>
+                {#snippet label()}
+                  Handler
+                {/snippet}
+                <RadioButton bind:group={owner} value="design">Box crew</RadioButton>
+                <RadioButton bind:group={owner} value="frontend">Can crew</RadioButton>
+                <RadioButton bind:group={owner} value="product">Pack crew</RadioButton>
+              </FormItem>
+
+              <FormItem>
+                {#snippet label()}
+                  Density
+                {/snippet}
+                <Select bind:value={density}>
+                  <option value="compact">Compact</option>
+                  <option value="balanced">Balanced</option>
+                  <option value="spacious">Spacious</option>
+                </Select>
+              </FormItem>
+
+              <FormItem>
+                {#snippet label()}
+                  Confidence {confidence}%
+                {/snippet}
+                <Slider bind:value={confidence} min={0} max={100} />
+              </FormItem>
+
+              <FormItem>
+                {#snippet label()}
+                  History
+                {/snippet}
+                <Checkbox bind:checked={includeArchived}>Include archived containers</Checkbox>
+              </FormItem>
+            </Fieldset>
+          </Form>
+        </Container>
+
+        <Container border>
+          <Bar secondary>
+            <h2>Containment Queue</h2>
+            <Button data-audit-action="open-detail" onclick={openDetail}>
+              Inspect
+            </Button>
+          </Bar>
+
+          {#if detailOpen}
+            <div data-audit-target="detail-open">
+              <Card>
+                {#snippet header()}
+                  <h3>Selection detail</h3>
+                {/snippet}
+                <p>
+                  The selected container has survived the first shake test, but
+                  the crew still needs to inspect its label, closure, and
+                  surrounding paperwork. Long copy is useful here because a
+                  container can look perfectly calm until a full manifest asks
+                  it to hold three more lines than planned.
+                </p>
+              </Card>
+            </div>
+          {/if}
+
+          <DataList stackable>
+            {#each members as member}
+              <DataListItem interactive>
+                {#snippet start()}
+                  <Tag info>{member.name.slice(0, 1)}</Tag>
+                {/snippet}
+                <h3>{member.name}</h3>
+                <span>{member.role}</span>
+                {#snippet end()}
+                  {#if member.intent === "success"}
+                    <Tag success>{member.status}</Tag>
+                  {:else if member.intent === "warning"}
+                    <Tag warning>{member.status}</Tag>
+                  {:else}
+                    <Tag info>{member.status}</Tag>
+                  {/if}
+                {/snippet}
+              </DataListItem>
+            {/each}
+          </DataList>
+        </Container>
+      </GridLayout>
+
+      <Container border data-audit-target="table-panel">
+        <Bar secondary>
+          <h2>Seal Checklist</h2>
+          <Inline wrap="wrap">
+            <Tag info>{density}</Tag>
+            <Tag success>{plan}</Tag>
+          </Inline>
+        </Bar>
+
+        <Table>
+          {#snippet thead()}
+            <thead>
+              <tr>
+                <th>Area</th>
+                <th>Inspection Focus</th>
+                <th>Status</th>
+                <th>Action</th>
+              </tr>
+            </thead>
+          {/snippet}
+
+          {#snippet tbody()}
+            <tbody>
+              {#each rows as row}
+                <tr>
+                  <th>{row[0]}</th>
+                  <td>{row[1]}</td>
+                  <td>{row[2]}</td>
+                  <td><Button>Open</Button></td>
+                </tr>
+              {/each}
+            </tbody>
+          {/snippet}
+        </Table>
+      </Container>
+    </Stack>
+  </Container>
+
+  {#if dialogOpen}
+    <Dialog
+      open={dialogOpen}
+      onClose={() => {
+        dialogOpen = false;
+      }}
+    >
+      <div data-audit-target="dialog-open">
+        <TextLayout>
+          <h2>Inspection preview</h2>
+          <p>
+            This modal is the inspection booth at the edge of the yard. The
+            supervisor checks the selected container, confirms the handler, and
+            stamps the confidence score before the little box is allowed to
+            travel with the rest of the shipment.
+          </p>
+        </TextLayout>
+        <GridLayout card>
+          <Card>
+            {#snippet header()}
+              <h3>Container</h3>
+            {/snippet}
+            <strong>{plan}</strong>
+          </Card>
+          <Card>
+            {#snippet header()}
+              <h3>Owner</h3>
+            {/snippet}
+            <strong>{owner}</strong>
+          </Card>
+          <Card>
+            {#snippet header()}
+              <h3>Confidence</h3>
+            {/snippet}
+            <strong>{confidence}%</strong>
+          </Card>
+        </GridLayout>
+      </div>
+    </Dialog>
+  {/if}
+</Page>

package/dist/review/scenarios/VisualSystemBoard.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const VisualSystemBoard: import("svelte").Component<Record<string, never>, {}, "">;
+type VisualSystemBoard = ReturnType<typeof VisualSystemBoard>;
+export default VisualSystemBoard;