@ikenga/pkg-tasks 0.4.0 → 0.4.1

package/dist/tasks.css

@@ -1,43 +1,15 @@
-/* Tasks screen — Ikenga Rung 3 / Batch 3 (08-tasks.html)
- * Reuses tokens from src/lib/ikenga/tokens.css. No new tokens.
+/* Tasks screen — domain RESIDUE only (P3 inc-3).
+ * The kit primitives — .frame*, .ip-head / .ip-topline / .ip-title / .ip-body /
+ * .ip-desc / .ip-progress* / .ip-action-bar*, .dense-row*, .tk-badge,
+ * .tk-execmode — now come from the vendored @ikenga/tokens app-kit-css (injected
+ * before this file by app.js, in cascade order tokens -> app-kit -> this).
+ * What remains here is the Tasks-specific vocabulary the kit does not own:
+ * the filter bar, master/detail split shell, group dividers, the inspector
+ * field-grid / meta-row / timeline / source + evidence chips, the agenda +
+ * triage layouts, the (deferred) feedback states, and the local button.
  */
 
-/* === Frame ================================================== */
-.tk-frame {
-  /* No card chrome inside the shell — the pkg pane IS the container, so the
-   * content fills it flush (mirrors the design's `#tk-host > .frame` reset).
-   * No border / radius / shadow / surrounding padding. */
-  background: var(--bg-surface);
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-}
-.tk-frame-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-4);
-  /* Slim single-row action bar (R-header): the sidebar carries domain + view
-   * nav, so this bar holds only the active-view label + the New task action. */
-  padding: var(--space-2) var(--space-5);
-  border-bottom: 1px solid var(--border-soft);
-  background: linear-gradient(180deg, var(--tint-bg-active, var(--bg-surface)) 0%, var(--bg-surface) 100%);
-}
-.tk-frame-title-wrap { display: flex; align-items: center; gap: var(--space-2); }
-.tk-frame-title-mark { width: 15px; height: 15px; color: var(--tint-fg-active, var(--primary)); }
-.tk-frame-title {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: var(--text-body);
-  margin: 0;
-  color: var(--fg);
-}
-.tk-frame-sub {
-  margin-top: 2px;
-  font-size: var(--text-caption);
-  color: var(--fg-muted);
-}
+/* === Frame (residue: the auto-closed count chip) ============ */
 .tk-frame-count {
   font-family: var(--font-mono);
   font-size: 12px;
@@ -207,75 +179,11 @@
   gap: 6px;
 }
 
-/* === Task row =============================================== */
-.tk-row {
-  display: grid;
-  grid-template-columns: 14px 1fr auto;
-  gap: var(--space-3);
-  padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
-  border-bottom: 1px solid var(--border-soft);
-  cursor: pointer;
-  position: relative;
-  background: transparent;
-  text-align: left;
-  width: 100%;
-  border-left: 0;
-  border-right: 0;
-  border-top: 0;
-  font: inherit;
-  color: inherit;
-  transition: background var(--motion-fast) var(--ease-calm);
-}
-.tk-row:hover { background: var(--bg-raised); }
-.tk-row.is-on { background: var(--bg-raised); }
-.tk-row.is-on::before {
-  content: '';
-  position: absolute;
-  left: 0;
-  top: 8px;
-  bottom: 8px;
-  width: 2px;
-  border-radius: 2px;
-  background: var(--tint-fg-active, var(--primary));
-}
-.tk-row .pri-dot {
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  margin-top: 5px;
-  background: var(--fg-faint);
-  flex-shrink: 0;
-}
-.tk-row .pri-dot.is-critical {
-  background: var(--danger);
-  box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 20%, transparent);
-}
-.tk-row .pri-dot.is-high { background: var(--achievement); }
-.tk-row .pri-dot.is-medium { background: var(--systemic); }
-.tk-row .pri-dot.is-low { background: var(--fg-faint); }
-.tk-row .body {
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.tk-row .title {
-  font-size: var(--text-body-sm);
-  color: var(--fg);
-  font-weight: 500;
-  line-height: 1.35;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-}
-.tk-row.is-completed .title {
-  color: var(--fg-muted);
-  text-decoration: line-through;
-  text-decoration-thickness: 1px;
-}
-.tk-row .meta {
+/* === Task row (residue: the meta strip + category micro-label;
+       .dense-row / .dense-row-dot / -body / -title / -right / -due now kit-owned.
+       The kit's .dense-row-meta tightens the chip gap to 4px; Tasks keeps 6px,
+       so .meta stays a domain child here rather than adopting .dense-row-meta.) */
+.dense-row--task .meta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -285,7 +193,7 @@
   color: var(--fg-faint);
   letter-spacing: 0.04em;
 }
-.tk-row .meta .cat {
+.dense-row--task .meta .cat {
   background: var(--bg-base);
   border: 1px solid var(--border-soft);
   color: var(--fg-muted);
@@ -293,62 +201,9 @@
   border-radius: var(--radius-xs);
   text-transform: lowercase;
 }
-.tk-row .right {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-  gap: 4px;
-  flex-shrink: 0;
-}
-.tk-row .due {
-  font-family: var(--font-mono);
-  font-size: 10px;
-  color: var(--fg-muted);
-  letter-spacing: 0.04em;
-  white-space: nowrap;
-}
-.tk-row .due.is-overdue { color: var(--danger); font-weight: 500; }
-.tk-row .due.is-today { color: var(--achievement); }
 
-/* === Status badge =========================================== */
-.tk-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-  padding: 2px 6px;
-  border-radius: var(--radius-xs);
-  border: 1px solid var(--border-soft);
-  color: var(--fg-muted);
-  background: var(--bg-base);
-  white-space: nowrap;
-}
-.tk-badge.is-pending { color: var(--fg-muted); }
-.tk-badge.is-in_progress {
-  color: var(--live);
-  background: var(--live-soft);
-  border-color: color-mix(in srgb, var(--live) 30%, var(--border-soft));
-}
-.tk-badge.is-blocked {
-  color: var(--danger);
-  background: color-mix(in srgb, var(--danger) 12%, transparent);
-  border-color: color-mix(in srgb, var(--danger) 30%, var(--border-soft));
-}
-.tk-badge.is-completed {
-  color: var(--live);
-  background: var(--live-soft);
-  border-color: color-mix(in srgb, var(--live) 30%, var(--border-soft));
-}
-.tk-badge.is-cancelled { color: var(--fg-faint); }
-.tk-badge .dot {
-  width: 5px;
-  height: 5px;
-  border-radius: 50%;
-  background: currentColor;
-}
+/* === Status badge — kit-owned (.tk-badge + states live in app-kit-css,
+       11-badge-tag-chip; byte-identical, so removed here to avoid a duplicate). */
 
 /* === Auto-close badge ======================================= */
 .tk-autoclose {
@@ -410,64 +265,20 @@
   background: var(--agent);
 }
 
-/* === Exec mode pill ========================================= */
-.tk-execmode {
-  font-family: var(--font-mono);
-  font-size: 9px;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--fg-faint);
-  border: 1px dashed var(--border-soft);
-  padding: 1px 5px;
-  border-radius: var(--radius-xs);
-  background: transparent;
-}
-.tk-execmode.is-autonomous {
-  color: var(--agent);
-  border-color: color-mix(in srgb, var(--agent) 30%, var(--border-soft));
-}
-.tk-execmode.is-approval_required {
-  color: var(--achievement);
-  border-color: color-mix(in srgb, var(--achievement) 35%, var(--border-soft));
-}
-.tk-execmode.is-report {
-  color: var(--systemic);
-  border-color: color-mix(in srgb, var(--systemic) 30%, var(--border-soft));
-}
+/* === Exec mode pill — kit-owned (.tk-execmode + states live in app-kit-css,
+       34-ux-mode-action-surfaces; byte-identical, removed here to avoid a dup). */
 
-/* === Detail panel =========================================== */
-.tk-det-head {
-  padding: var(--space-4) var(--space-5);
-  border-bottom: 1px solid var(--border-soft);
-  background: linear-gradient(180deg, var(--tint-bg-active, var(--bg-surface)) 0%, var(--bg-base) 100%);
-}
-.tk-det-topline {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-3);
-  margin-bottom: 8px;
-  font-family: var(--font-mono);
-  font-size: 10.5px;
-  color: var(--fg-faint);
-  letter-spacing: 0.04em;
-}
-.tk-det-topline .id {
+/* === Detail panel (residue: the id chip + meta-row; .ip-head / .ip-topline /
+       .ip-topline-actions / .ip-title now kit-owned via inspector-detail).
+       The kit's .ip-topline-id pads 2px 8px; Tasks keeps the shipped 2px 6px,
+       so the id chip stays a domain child re-scoped under the kit .ip-topline. */
+.ip-topline .id {
   background: var(--bg-base);
   border: 1px solid var(--border-soft);
   padding: 2px 6px;
   border-radius: var(--radius-xs);
   color: var(--fg);
 }
-.tk-det-actions { display: flex; gap: 4px; align-items: center; }
-.tk-det-title {
-  font-family: var(--font-display);
-  font-weight: 500;
-  font-size: var(--text-h3);
-  margin: 0;
-  color: var(--fg);
-  line-height: 1.25;
-}
 .tk-det-meta-row {
   display: flex;
   flex-wrap: wrap;
@@ -493,13 +304,6 @@
 }
 .tk-det-meta-row .due-text { color: var(--fg-muted); }
 .tk-det-meta-row .due-text.is-overdue { color: var(--danger); }
-.tk-det-body {
-  padding: var(--space-5);
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-5);
-  flex: 1;
-}
 .tk-det-grid {
   display: grid;
   grid-template-columns: 110px 1fr;
@@ -563,34 +367,8 @@
   background: transparent;
 }
 
-.tk-desc {
-  font-size: var(--text-body-sm);
-  color: var(--fg-muted);
-  line-height: 1.6;
-  background: var(--bg-surface);
-  border: 1px solid var(--border-soft);
-  border-radius: var(--radius-md);
-  padding: var(--space-3) var(--space-4);
-  white-space: pre-wrap;
-}
-
-/* === Progress bar =========================================== */
-.tk-progress {
-  flex: 1;
-  height: 6px;
-  background: var(--bg-sunken);
-  border-radius: 3px;
-  overflow: hidden;
-  border: 1px solid var(--border-soft);
-  min-width: 120px;
-}
-.tk-progress > span {
-  display: block;
-  height: 100%;
-  background: var(--live);
-  border-radius: 3px;
-  transition: width var(--motion-fast) var(--ease-calm);
-}
+/* === Description + progress bar — kit-owned (.ip-desc and .ip-progress /
+       .ip-progress-fill live in app-kit-css, inspector-detail). */
 
 /* === Evidence card ========================================== */
 .tk-evidence {
@@ -756,19 +534,11 @@
 }
 .tk-tl-item .actor.is-agent { color: var(--agent); }
 
-/* === Action footer ========================================== */
-.tk-action-bar {
-  border-top: 1px solid var(--border-soft);
-  background: var(--bg-sunken);
-  padding: var(--space-3) var(--space-5);
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-  margin-top: auto;
-}
-.tk-action-bar .spacer { flex: 1; }
+/* === Action footer — kit-owned (.ip-action-bar / .ip-action-bar-spacer live
+       in app-kit-css, inspector-detail). Only rendered for density != full,
+       which the shipped pane never uses. */
 
-/* === Empty state in detail =================================== */
+/* === Empty state in detail (residue; feedback-state migration deferred) ==== */
 .tk-empty {
   flex: 1;
   display: grid;
@@ -780,60 +550,17 @@
   text-transform: uppercase;
 }
 
-/* === Density variants for $taskId standalone (Section B) ===== */
-.tk-detail-pane.is-compact .tk-det-head { padding: var(--space-3) var(--space-4); }
-.tk-detail-pane.is-compact .tk-det-title { font-size: var(--text-h4); }
-.tk-detail-pane.is-compact .tk-det-body { padding: var(--space-4); gap: var(--space-4); }
-.tk-detail-pane.is-compact .tk-det-grid { grid-template-columns: 90px 1fr; }
-.tk-detail-pane.is-side .tk-det-head { padding: var(--space-3); }
-.tk-detail-pane.is-side .tk-det-title { font-size: 13.5px; line-height: 1.35; }
-.tk-detail-pane.is-side .tk-det-body { padding: var(--space-3); gap: var(--space-3); }
-.tk-detail-pane.is-side .tk-det-grid { display: none; }
-.tk-detail-pane.is-side .tk-section-label { margin-bottom: 4px; }
+/* === Density variants ($taskId standalone) + in-pane view switcher: REMOVED.
+       The density variants are dead (the shipped pane is always density="full");
+       the .ip-tabs/.ip-tab switcher was dropped pre-ship (views live in the
+       shell side-menu). The kit's .tabs/.tab part covers underline tabs if a
+       future view needs them. */
 
-/* === In-body view switcher (D-2 / D-3) ====================== */
-.ip-tabs {
-  display: flex;
-  align-items: center;
-  gap: 0;
-  padding: 0 var(--space-3);
-  height: var(--tab-h, 38px);
-  border-bottom: 1px solid var(--border-soft);
-  background: var(--bg-sunken);
-}
-.ip-tab {
-  height: var(--tab-h, 38px);
-  padding: 0 var(--space-3);
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  font-family: var(--font-body);
-  font-size: var(--text-body-sm);
-  color: var(--fg-faint);
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  border-bottom: 2px solid transparent;
-  margin-bottom: -1px;
-}
-.ip-tab svg { width: 13px; height: 13px; opacity: 0.8; }
-.ip-tab:hover { color: var(--fg-muted); }
-.ip-tab.is-on { color: var(--fg); border-bottom-color: var(--tint-fg-active, var(--primary)); }
-.ip-tab.is-on svg { opacity: 1; color: var(--tint-fg-active, var(--primary)); }
-.ip-tab:focus-visible,
+/* Keyboard focus ring for the residue interactive elements. The kit's
+   .dense-row:focus-visible already covers task rows; the toggle + group head
+   are domain residue, so keep their ring here. */
 .tk-toggle:focus-visible,
-.tk-group-head:focus-visible,
-.tk-row:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
-.ip-tab-badge {
-  font-family: var(--font-mono);
-  font-size: 9.5px;
-  line-height: 1;
-  color: var(--achievement);
-  background: var(--achievement-soft);
-  border: 1px solid color-mix(in srgb, var(--achievement) 30%, var(--border-soft));
-  border-radius: var(--radius-pill, 999px);
-  padding: 2px 5px;
-}
+.tk-group-head:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }
 
 /* === Agenda / Today (D-2) =================================== */
 /* AgendaView root — rendered directly inside .tk-frame (which is overflow:hidden),

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ikenga/pkg-tasks",
-  "version": "0.4.0",
-  "description": "Tasks — List, Agenda, Triage over the production tasks schema. Multi-file iframe pkg, no build step.",
+  "version": "0.4.1",
+  "description": "Tasks — List, Agenda, Triage over the production tasks schema. Multi-file iframe pkg; deterministic CSS vendoring build.",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -18,7 +18,10 @@
     "README.md"
   ],
   "scripts": {
-    "build": "echo 'no build — multi-file ESM pkg'",
+    "build": "node scripts/build.mjs",
     "typecheck": "tsc -p tsconfig.dev.json"
+  },
+  "devDependencies": {
+    "@ikenga/tokens": "^0.3.0"
   }
 }