@echodial/deck 0.1.0

package/dist/layers/perf.css

@@ -0,0 +1,234 @@
+/* ==========================================================================
+   Deck — 26 Performance and drag
+   The usual answer to a ten thousand row grid is a virtualization library:
+   measure the viewport, render a window of rows, absolutely position a
+   spacer, and reconcile on every scroll frame. It works, it costs about five
+   kilobytes, and it breaks find-in-page, printing, accessibility tree order,
+   and text selection across the boundary.
+
+   content-visibility does the same job in the engine. Off-screen subtrees are
+   skipped during layout, style, paint, and hit testing, but they stay in the
+   DOM, so Ctrl+F still finds them, the print stylesheet still prints them,
+   and a screen reader still reads them. It needs one line of CSS and no
+   JavaScript at all.
+   ========================================================================== */
+
+@layer deck.components {
+
+  /* --- Virtualized rows ----------------------------------------------------
+     contain-intrinsic-size is the placeholder height for a skipped row. Get it
+     roughly right and the scrollbar is stable; the `auto` keyword makes the
+     browser remember the real height once a row has been rendered once.
+     ---------------------------------------------------------------------- */
+  .dg-virtual tbody tr {
+    content-visibility: auto;
+    contain-intrinsic-size: auto var(--dg-row-h, 44px);
+  }
+  .dg-virtual.dg-compact tbody tr { contain-intrinsic-size: auto 34px; }
+  .dg-virtual.dg-comfy tbody tr { contain-intrinsic-size: auto 56px; }
+
+  /* Skips layout, style and paint for offscreen rows with
+     content-visibility, using contain-intrinsic-size as the placeholder
+     height. One class, no windowing library. If your rows are not 56px,
+     override the intrinsic size or the scrollbar will jump. */
+  .list-virtual > .list-row {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 56px;
+  }
+
+  /* Any long stack of cards: an activity feed, a chat log, search results */
+  .virtual > * {
+    content-visibility: auto;
+    contain-intrinsic-size: auto var(--item-size, 120px);
+  }
+  .virtual-sm > * { --item-size: 64px; }
+  .virtual-lg > * { --item-size: 220px; }
+
+  /* Whole sections below the fold. Cheap and safe on any page. */
+  .defer {
+    content-visibility: auto;
+    contain-intrinsic-size: auto 600px;
+  }
+
+  /* Printing must render everything, or half the report comes out blank */
+  @media print {
+    .dg-virtual tbody tr, .list-virtual > .list-row, .virtual > *, .defer {
+      content-visibility: visible !important;
+      contain-intrinsic-size: none !important;
+    }
+  }
+
+  /* --- Containment ---------------------------------------------------------
+     Tell the engine that a component's layout cannot affect anything outside
+     it. On a dashboard with twenty cards this is the difference between one
+     layout pass and twenty.
+     ---------------------------------------------------------------------- */
+  .contain { contain: layout style; }
+  .contain-paint { contain: layout style paint; }
+  .card, .panel, .list, .dg-wrap, .chart { contain: layout style; }
+
+  /* --- Drag and drop -------------------------------------------------------
+     Deck styles the states; deck-adapters.js drives them with SortableJS when
+     it is present, or with the native HTML drag and drop API when it is not.
+     The class names are SortableJS's defaults, so no configuration is needed.
+     ---------------------------------------------------------------------- */
+  .sortable { position: relative; }
+  .sortable [draggable="true"], .drag-handle { cursor: grab; touch-action: none; }
+  .sortable [draggable="true"]:active, .drag-handle:active { cursor: grabbing; }
+
+  .drag-handle {
+    display: grid;
+    place-items: center;
+    inline-size: 28px;
+    min-block-size: var(--tap);
+    color: var(--text-faint);
+    flex: 0 0 auto;
+    opacity: 0;
+    transition: opacity var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
+  }
+  :is(.list-row, .dg tbody tr, .kanban-card):is(:hover, :focus-within) .drag-handle { opacity: 1; }
+  .drag-handle:hover { color: var(--text); }
+  @media (pointer: coarse) { .drag-handle { opacity: 1; } }
+
+  /* The item being dragged, following the pointer */
+  .sortable-drag {
+    opacity: 1 !important;
+    box-shadow: var(--shadow-4);
+    rotate: 1.5deg;
+    scale: 1.02;
+    cursor: grabbing;
+  }
+  /* The gap left where the item will land */
+  .sortable-ghost {
+    opacity: .4;
+    background: var(--brand-soft) !important;
+    outline: 2px dashed var(--brand-400);
+    outline-offset: -2px;
+  }
+  .sortable-ghost > * { visibility: hidden; }
+  .sortable-chosen { background: var(--surface-hover); }
+  .sortable-fallback { opacity: .9; }
+
+  /* A list that is accepting a drop */
+  .drop-target {
+    outline: 2px dashed var(--brand-400);
+    outline-offset: 3px;
+    border-radius: var(--r-md);
+    background: color-mix(in oklab, var(--brand-soft) 55%, transparent);
+  }
+  .drop-reject { outline-color: var(--bad-500); background: color-mix(in oklab, var(--bad-100) 55%, transparent); }
+
+  /* --- Kanban --------------------------------------------------------------
+     The obvious thing to build once you have drag and drop. An issue queue by
+     status is the same shape as a board.
+     ---------------------------------------------------------------------- */
+  .kanban {
+    display: flex;
+    gap: var(--space-4);
+    overflow-x: auto;
+    overscroll-behavior-inline: contain;
+    padding-block-end: var(--space-3);
+    align-items: flex-start;
+    scroll-snap-type: x proximity;
+  }
+  /* One column: a fixed width with a viewport cap so a phone still shows a
+     sliver of the next, capped in height by --kanban-height. */
+  .kanban-col {
+    flex: 0 0 min(19rem, 82vw);
+    scroll-snap-align: start;
+    display: flex;
+    flex-direction: column;
+    max-block-size: var(--kanban-height, 70dvh);
+    background: var(--bg-sunken);
+    border: 1px solid var(--line);
+    border-radius: var(--r-md);
+  }
+  /* The column title and count, outside the scrolling area so they stay
+     visible while cards scroll. */
+  .kanban-head {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border-block-end: 1px solid var(--line);
+    font-size: var(--text-sm);
+    font-weight: 620;
+    position: sticky;
+    inset-block-start: 0;
+    background: inherit;
+    border-start-start-radius: var(--r-md);
+    border-start-end-radius: var(--r-md);
+    z-index: 1;
+  }
+  .kanban-count {
+    margin-inline-start: auto;
+    font-size: var(--text-xs);
+    font-weight: 600;
+    color: var(--text-muted);
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-full);
+    padding: 1px 7px;
+    font-variant-numeric: tabular-nums;
+  }
+  /* The scrolling card region, with a 5rem floor so an empty column is still
+     something you can drop onto. */
+  .kanban-body {
+    flex: 1 1 auto;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: var(--space-3);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-3);
+    min-block-size: 5rem;
+  }
+  /* One card. .kanban-card-title is styling, not a heading — if the card
+     opens something, make the title a link. */
+  .kanban-card {
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-radius: var(--r-sm);
+    padding: var(--space-3);
+    box-shadow: var(--shadow-1);
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+    content-visibility: auto;
+    contain-intrinsic-size: auto 110px;
+  }
+  .kanban-card:hover { box-shadow: var(--shadow-2); }
+  .kanban-card-title { font-size: var(--text-sm); font-weight: 580; }
+  .kanban-card-meta {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    font-size: var(--text-xs);
+    color: var(--text-muted);
+  }
+  /* Shown in an empty column and hidden by :has(.kanban-card) as soon as one
+     arrives, so nothing has to remember to toggle it. */
+  .kanban-empty {
+    border: 1px dashed var(--line-strong);
+    border-radius: var(--r-sm);
+    padding: var(--space-5);
+    text-align: center;
+    color: var(--text-faint);
+    font-size: var(--text-sm);
+  }
+  .kanban-col:has(.kanban-card) .kanban-empty { display: none; }
+
+  /* --- Reorderable list ----------------------------------------------------- */
+  .reorder .list-row { user-select: none; }
+  .reorder .list-row.is-lifted {
+    box-shadow: var(--shadow-3);
+    background: var(--surface);
+    border-radius: var(--r-sm);
+    z-index: 2;
+    position: relative;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sortable-drag { rotate: none; scale: 1; }
+  }
+}

package/dist/layers/print.css

@@ -0,0 +1,198 @@
+/* ==========================================================================
+   Deck — 15 Print
+   Real work still gets printed. Invoices, packing slips, purchase orders, and
+   reports all end up on paper or in a PDF, so this is a real stylesheet and
+   not an afterthought.
+   ========================================================================== */
+
+@layer deck.print {
+
+  @page {
+    size: letter;
+    margin: 16mm 14mm;
+  }
+  @page :first { margin-block-start: 12mm; }
+
+  @media print {
+
+    /* --- Force the light palette. Dark mode is a screen idea. -------------- */
+    :root {
+      color-scheme: light only;
+      --bg: #fff;
+      --bg-sunken: #fff;
+      --surface: #fff;
+      --surface-2: #fff;
+      --surface-hover: #fff;
+      --text: #000;
+      --text-muted: #333;
+      --text-faint: #555;
+      --line: #bbb;
+      --line-strong: #888;
+      --shadow-1: none; --shadow-2: none; --shadow-3: none; --shadow-4: none;
+      --shadow-inset: none;
+    }
+
+    html, body {
+      background: #fff !important;
+      color: #000 !important;
+      font-size: 10.5pt;
+      line-height: 1.4;
+    }
+
+    body { padding-block-end: 0 !important; }
+
+    * {
+      box-shadow: none !important;
+      text-shadow: none !important;
+      backdrop-filter: none !important;
+      -webkit-backdrop-filter: none !important;
+      animation: none !important;
+      transition: none !important;
+    }
+
+    /* Keep intentional fills — badges, status chips, chart series */
+    .badge, .chip, .chart-col, .chart-col-stack > span, .chart-bar-fill,
+    .chart-meter > span, .donut, .icon-tile, .avatar, .chart-heat > * {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+
+    /* --- Chrome that should never print ------------------------------------ */
+    .tabbar, .fab, .speed-dial, .back-to-top, .toast-region, .skip-link, .theme-dock,
+    .navbar-links, .sidebar, .datepicker, .combo-list, .menu,
+    .dg-toolbar, .dg-resize, .sheet-grip, .no-print,
+    .pagination, .segmented, .tabs, .scroller::-webkit-scrollbar {
+      display: none !important;
+    }
+
+    /* Dialogs print only if they are actually open, and then as a block */
+    dialog:not([open]) { display: none !important; }
+    dialog[open] {
+      position: static !important;
+      display: block !important;
+      max-block-size: none !important;
+      inline-size: auto !important;
+      border: 0 !important;
+    }
+    dialog::backdrop { display: none !important; }
+
+    /* --- Layout ------------------------------------------------------------ */
+    .container, .container-sm, .container-md, .container-lg, .container-xl {
+      max-inline-size: none !important;
+      padding-inline: 0 !important;
+    }
+    .section { padding-block: 0 0 8mm !important; }
+    .split { display: block !important; }
+    .grid { display: block !important; }
+    .grid > * + * { margin-block-start: 4mm; }
+    .sticky-top, .sticky, .form-actions-sticky { position: static !important; }
+
+    /* --- Surfaces ---------------------------------------------------------- */
+    .card, .panel, .list, .table-wrap, .dg-wrap, .alert, .fieldset {
+      border: 1px solid #bbb !important;
+      border-radius: 0 !important;
+      background: #fff !important;
+      break-inside: avoid;
+      max-block-size: none !important;
+      overflow: visible !important;
+    }
+    .card-footer, .list-header, .dg thead th, .table thead th {
+      background: #f2f2f2 !important;
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+    }
+
+    /* --- Type -------------------------------------------------------------- */
+    h1, .h1 { font-size: 20pt; }
+    h2, .h2 { font-size: 15pt; }
+    h3, .h3 { font-size: 12.5pt; }
+    h4, .h4, h5, .h5, h6, .h6 { font-size: 11pt; }
+    .display { font-size: 22pt; }
+    .lede { font-size: 11pt; color: #333 !important; }
+
+    h1, h2, h3, h4, h5, h6 { break-after: avoid; page-break-after: avoid; }
+    p, blockquote, li, figure, .stat, .timeline-item { break-inside: avoid; }
+    .prose { max-inline-size: none; }
+
+    /* Show where a link actually goes, but not for anchors or JS handles */
+    a { color: #000 !important; text-decoration: underline; }
+    a[href^="http"]::after {
+      content: " (" attr(href) ")";
+      font-size: 8.5pt;
+      color: #555;
+      word-break: break-all;
+    }
+    a[href^="#"]::after, a[href^="javascript:"]::after, .btn::after, .no-print-url::after { content: ""; }
+
+    abbr[title]::after { content: " (" attr(title) ")"; font-size: 8.5pt; }
+
+    /* --- Tables ------------------------------------------------------------ */
+    .table, .dg { inline-size: 100% !important; font-size: 9.5pt; }
+    .table thead, .dg thead { display: table-header-group; }
+    .dg tfoot, .table tfoot { display: table-footer-group; }
+    .table tr, .dg tr { break-inside: avoid; page-break-inside: avoid; }
+    .dg :is(th, td) {
+      position: static !important;
+      block-size: auto !important;
+      padding: 4pt 6pt !important;
+      white-space: normal !important;
+      clip-path: none !important;
+      border-block-end: 1px solid #ddd !important;
+    }
+    .dg-wrap { max-block-size: none !important; overflow: visible !important; }
+
+    /* The mobile card fallbacks are a screen behaviour, not a paper one */
+    .table-stack thead, .dg-cards thead {
+      position: static !important;
+      inline-size: auto !important;
+      block-size: auto !important;
+      clip-path: none !important;
+      display: table-header-group !important;
+      overflow: visible !important;
+    }
+    .table-stack, .dg-cards { display: table !important; }
+    .table-stack tbody, .dg-cards tbody { display: table-row-group !important; }
+    .table-stack tr, .dg-cards tr { display: table-row !important; margin: 0 !important; border-radius: 0 !important; }
+    .table-stack td, .dg-cards td { display: table-cell !important; text-align: start !important; }
+    .table-stack td::before, .dg-cards td::before { content: none !important; }
+
+    /* --- Forms ------------------------------------------------------------- */
+    .input, .textarea, .select, .combo-control {
+      border: 1px solid #999 !important;
+      background: #fff !important;
+      min-block-size: auto !important;
+    }
+    .textarea { max-block-size: none !important; block-size: auto !important; }
+    .select { background-image: none !important; padding-inline-end: var(--space-3) !important; }
+    .btn, .form-actions { display: none !important; }
+    .btn.print-keep { display: inline-flex !important; border: 1px solid #999 !important; }
+
+    /* Checkboxes print as boxes with a mark, not as filled squares */
+    .check input[type="checkbox"], .check input[type="radio"] {
+      -webkit-print-color-adjust: exact;
+      print-color-adjust: exact;
+      border: 1px solid #000 !important;
+      background: #fff !important;
+    }
+    .check input:checked { background: #000 !important; border-color: #000 !important; }
+    .switch input { border: 1px solid #000 !important; }
+
+    /* --- Charts ------------------------------------------------------------ */
+    .chart, .chart-columns, .chart-svg { break-inside: avoid; }
+    .chart-col[data-value]::before { display: none !important; }
+    .chart-columns { background-image: none !important; border-block-end: 1px solid #999; }
+
+    /* --- Page break helpers ------------------------------------------------ */
+    .page-break { break-before: page; page-break-before: always; }
+    .page-break-after { break-after: page; page-break-after: always; }
+    .keep-together { break-inside: avoid; page-break-inside: avoid; }
+    .print-only { display: revert !important; }
+
+    /* Repeat a header on every page of a long report */
+    .print-header { position: fixed; inset-block-start: 0; inset-inline: 0; }
+    .print-footer { position: fixed; inset-block-end: 0; inset-inline: 0; font-size: 8.5pt; color: #555; }
+  }
+
+  /* Hidden on screen, shown on paper */
+  .print-only { display: none; }
+}

package/dist/layers/reset.css

@@ -0,0 +1,103 @@
+/* ==========================================================================
+   Deck — 02 Reset
+   ========================================================================== */
+
+@layer deck.reset {
+
+  *, *::before, *::after { box-sizing: border-box; }
+
+  * { margin: 0; }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+    -moz-text-size-adjust: 100%;
+    text-size-adjust: 100%;
+    tab-size: 2;
+    scroll-behavior: smooth;
+    scroll-padding-block-start: calc(var(--control-h-lg) + var(--space-4));
+  }
+
+  body {
+    min-block-size: 100dvh;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-sans);
+    font-size: var(--text-base);
+    line-height: var(--leading-normal);
+    font-synthesis-weight: none;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+    overflow-wrap: break-word;
+  }
+
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    max-inline-size: 100%;
+  }
+  img, video { block-size: auto; }
+
+  input, button, textarea, select { font: inherit; color: inherit; }
+
+  button { background: none; border: 0; }
+
+  p, li, figcaption { text-wrap: pretty; }
+  h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
+
+  ul[class], ol[class] { list-style: none; padding: 0; }
+
+  table { border-collapse: collapse; border-spacing: 0; }
+
+  hr {
+    border: 0;
+    block-size: 1px;
+    background: var(--line);
+  }
+
+  :target { scroll-margin-block-start: var(--space-16); }
+
+  ::selection {
+    background: var(--brand-200);
+    color: var(--ink-950);
+  }
+
+  /* One focus treatment for the whole framework */
+  :focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    border-radius: var(--r-xs);
+  }
+  :focus:not(:focus-visible) { outline: none; }
+
+  /* Firefox needs help with the scrollbar; WebKit gets the thin version */
+  * { scrollbar-color: var(--ink-300) transparent; scrollbar-width: thin; }
+  ::-webkit-scrollbar { inline-size: 10px; block-size: 10px; }
+  ::-webkit-scrollbar-thumb {
+    background: var(--ink-300);
+    border-radius: var(--r-full);
+    border: 3px solid transparent;
+    background-clip: content-box;
+  }
+  ::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: content-box; }
+
+  @media (prefers-reduced-motion: reduce) {
+    html { scroll-behavior: auto; }
+    *, *::before, *::after {
+      animation-duration: .01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: .01ms !important;
+      scroll-behavior: auto !important;
+    }
+    /* Loading indicators keep moving, slowly. A frozen spinner reads as broken,
+       and progress feedback is information, not decoration. */
+    .spinner, .icon-spin, .skeleton, .marquee-track, .btn.is-loading::after,
+    .dg-wrap.is-loading::after, .ping::after {
+      animation-duration: 2.4s !important;
+      animation-iteration-count: infinite !important;
+    }
+  }
+
+  /* Opt in per-element where a smooth auto height matters */
+  @supports (interpolate-size: allow-keywords) {
+    :root { interpolate-size: allow-keywords; }
+  }
+}