@profpowell/vb-project-planning 0.1.0

package/src/web-components/gantt-chart/static.html

@@ -0,0 +1,60 @@
+<!--
+  gantt-chart — static (zero-JS) form
+  Without JS, the native table renders with progress bars and time elements.
+-->
+<gantt-chart title="Q2 Product Roadmap" show-today show-progress>
+  <table>
+    <thead>
+      <tr>
+        <th>Task</th>
+        <th>Start</th>
+        <th>End</th>
+        <th>Progress</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr data-task-id="research" data-group="Design" data-status="done">
+        <td>User research</td>
+        <td><time datetime="2026-04-01">Apr 1</time></td>
+        <td><time datetime="2026-04-07">Apr 7</time></td>
+        <td><progress value="100" max="100">100%</progress></td>
+      </tr>
+      <tr data-task-id="wireframes" data-group="Design" data-depends="research" data-status="done">
+        <td>Wireframes</td>
+        <td><time datetime="2026-04-07">Apr 7</time></td>
+        <td><time datetime="2026-04-14">Apr 14</time></td>
+        <td><progress value="100" max="100">100%</progress></td>
+      </tr>
+      <tr data-task-id="visual-design" data-group="Design" data-depends="wireframes" data-status="in-progress">
+        <td>Visual design</td>
+        <td><time datetime="2026-04-14">Apr 14</time></td>
+        <td><time datetime="2026-04-28">Apr 28</time></td>
+        <td><progress value="60" max="100">60%</progress></td>
+      </tr>
+      <tr data-task-id="api" data-group="Engineering" data-depends="wireframes" data-status="in-progress">
+        <td>API development</td>
+        <td><time datetime="2026-04-10">Apr 10</time></td>
+        <td><time datetime="2026-05-01">May 1</time></td>
+        <td><progress value="40" max="100">40%</progress></td>
+      </tr>
+      <tr data-task-id="frontend" data-group="Engineering" data-depends="visual-design,api" data-status="not-started">
+        <td>Frontend build</td>
+        <td><time datetime="2026-04-28">Apr 28</time></td>
+        <td><time datetime="2026-05-15">May 15</time></td>
+        <td><progress value="0" max="100">0%</progress></td>
+      </tr>
+      <tr data-task-id="testing" data-group="QA" data-depends="frontend" data-status="not-started">
+        <td>QA testing</td>
+        <td><time datetime="2026-05-12">May 12</time></td>
+        <td><time datetime="2026-05-22">May 22</time></td>
+        <td><progress value="0" max="100">0%</progress></td>
+      </tr>
+      <tr data-task-id="launch" data-group="Engineering" data-depends="testing" data-milestone data-status="not-started">
+        <td>Launch</td>
+        <td><time datetime="2026-05-25">May 25</time></td>
+        <td><time datetime="2026-05-25">May 25</time></td>
+        <td><progress value="0" max="100">0%</progress></td>
+      </tr>
+    </tbody>
+  </table>
+</gantt-chart>

package/src/web-components/gantt-chart/styles.css

@@ -0,0 +1,391 @@
+/**
+ * Light DOM styles for <gantt-chart>
+ *
+ * Layout: task-list (left) | timeline bars (right)
+ * Progressive: without JS, the native <table> renders normally.
+ */
+
+/* ── Host ──────────────────────────────────────────── */
+gantt-chart {
+  display: block;
+  container-type: inline-size;
+  font-family: var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  line-height: 1.5;
+  color: var(--color-text, #1a1a1a);
+}
+
+/* Before upgrade, the table is visible normally */
+gantt-chart:not([data-upgraded]) > table {
+  width: 100%;
+}
+
+/* ── Title ─────────────────────────────────────────── */
+.gc-title {
+  font-size: var(--font-size-xl, 1.25rem);
+  font-weight: 700;
+  margin-block-end: var(--size-s, 0.75rem);
+}
+
+/* ── Container ─────────────────────────────────────── */
+.gc-container {
+  border: 1px solid var(--color-border, #e0e0e0);
+  border-radius: var(--radius-m, 0.5rem);
+  overflow: hidden;
+  background: var(--color-surface, #ffffff);
+}
+
+/* ── Timeline header ───────────────────────────────── */
+.gc-timeline-header {
+  display: flex;
+  position: relative;
+  border-block-end: 1px solid var(--color-border, #e0e0e0);
+  background: var(--color-surface-raised, #f8f9fa);
+  min-height: 32px;
+}
+
+.gc-timeline-spacer {
+  flex: 0 0 var(--gc-task-width, 180px);
+  border-inline-end: 1px solid var(--color-border, #e0e0e0);
+}
+
+.gc-timeline-dates {
+  flex: 1;
+  position: relative;
+  min-height: 32px;
+}
+
+.gc-date-label {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-muted, #666666);
+  padding-inline-start: 6px;
+  white-space: nowrap;
+  border-inline-start: 1px solid var(--color-border, #e0e0e0);
+}
+
+.gc-date-label:first-child {
+  border-inline-start: none;
+}
+
+/* ── Body layout ───────────────────────────────────── */
+.gc-body {
+  display: flex;
+  min-height: 0;
+}
+
+/* ── Task list (left panel) ────────────────────────── */
+.gc-task-list {
+  flex: 0 0 var(--gc-task-width, 180px);
+  border-inline-end: 1px solid var(--color-border, #e0e0e0);
+  overflow: hidden;
+}
+
+.gc-task-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: var(--gc-row-height, 36px);
+  padding-inline: 12px;
+  border-block-end: 1px solid color-mix(in srgb, var(--color-border, #e0e0e0) 50%, transparent);
+  font-size: var(--font-size-sm, 0.875rem);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gc-task-row:last-child {
+  border-block-end: none;
+}
+
+.gc-task-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.gc-task-dates {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+}
+
+/* ── Group headers ─────────────────────────────────── */
+.gc-group-header {
+  display: flex;
+  align-items: center;
+  height: 28px;
+  padding-inline: 12px;
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 1px solid var(--color-border, #e0e0e0);
+}
+
+.gc-group-label {
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--color-text-muted, #666666);
+}
+
+.gc-group-spacer {
+  height: 28px;
+  background: var(--color-surface-raised, #f8f9fa);
+  border-block-end: 1px solid var(--color-border, #e0e0e0);
+}
+
+/* ── Bars panel (right panel) ──────────────────────── */
+.gc-bars {
+  flex: 1;
+  position: relative;
+  min-width: 0;
+  overflow-x: auto;
+}
+
+/* ── Grid lines ────────────────────────────────────── */
+.gc-grid-lines {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+}
+
+.gc-grid-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 1px;
+  background: color-mix(in srgb, var(--color-border, #e0e0e0) 50%, transparent);
+}
+
+/* ── Bar rows ──────────────────────────────────────── */
+.gc-bar-row {
+  position: relative;
+  height: var(--gc-row-height, 36px);
+  border-block-end: 1px solid color-mix(in srgb, var(--color-border, #e0e0e0) 50%, transparent);
+}
+
+.gc-bar-row:last-child {
+  border-block-end: none;
+}
+
+/* ── Bars ──────────────────────────────────────────── */
+.gc-bar {
+  position: absolute;
+  top: 6px;
+  bottom: 6px;
+  border-radius: var(--radius-s, 4px);
+  background: var(--gc-bar-color, var(--color-interactive, #0066cc));
+  cursor: pointer;
+  min-width: 4px;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  transition: filter 150ms ease;
+}
+
+.gc-bar:hover {
+  filter: brightness(1.1);
+}
+
+.gc-bar:focus-visible {
+  outline: 2px solid var(--color-interactive, #0066cc);
+  outline-offset: 2px;
+}
+
+/* ── Bar fill (progress) ───────────────────────────── */
+.gc-bar-fill {
+  height: 100%;
+  border-radius: inherit;
+  background: color-mix(in srgb, var(--gc-bar-color, var(--color-interactive, #0066cc)) 65%, white);
+  pointer-events: none;
+}
+
+/* ── Bar label ─────────────────────────────────────── */
+.gc-bar-label {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  padding-inline: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  color: #fff;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  pointer-events: none;
+}
+
+/* ── Status colors ─────────────────────────────────── */
+.gc-bar[data-status="done"] {
+  --gc-bar-color: var(--color-success, #16a34a);
+}
+
+.gc-bar[data-status="blocked"] {
+  --gc-bar-color: var(--color-error, #dc2626);
+}
+
+.gc-bar[data-status="not-started"] {
+  --gc-bar-color: var(--color-text-muted, #666666);
+  opacity: 0.6;
+}
+
+/* ── Milestone (diamond) ───────────────────────────── */
+.gc-milestone {
+  position: absolute;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translate(-50%, -50%) rotate(45deg);
+  background: var(--gc-bar-color, var(--color-interactive, #0066cc));
+  border: 2px solid var(--color-surface, #ffffff);
+  cursor: pointer;
+}
+
+.gc-milestone:focus-visible {
+  outline: 2px solid var(--color-interactive, #0066cc);
+  outline-offset: 3px;
+}
+
+.gc-milestone[data-status="done"] {
+  --gc-bar-color: var(--color-success, #16a34a);
+}
+
+/* ── Today line ────────────────────────────────────── */
+.gc-today-line {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 2px;
+  background: var(--color-error, #dc2626);
+  z-index: 5;
+  pointer-events: none;
+}
+
+.gc-today-label {
+  position: absolute;
+  top: -22px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 10px;
+  font-weight: 700;
+  color: var(--color-error, #dc2626);
+  white-space: nowrap;
+}
+
+/* ── Dependency arrows ─────────────────────────────── */
+.gc-deps {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  overflow: visible;
+}
+
+.gc-dep-line {
+  fill: none;
+  stroke: var(--color-text-muted, #666666);
+  stroke-width: 1.5;
+  marker-end: url(#gc-arrowhead);
+}
+
+/* ── Visually hidden (original table + live region) ── */
+.gc-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* ── Compact variant ───────────────────────────────── */
+gantt-chart[compact] {
+  --gc-row-height: 28px;
+  --gc-task-width: 140px;
+}
+
+gantt-chart[compact] .gc-task-row {
+  font-size: 12px;
+  padding-inline: 8px;
+}
+
+gantt-chart[compact] .gc-bar {
+  top: 5px;
+  bottom: 5px;
+}
+
+gantt-chart[compact] .gc-group-header {
+  height: 24px;
+}
+
+gantt-chart[compact] .gc-group-spacer {
+  height: 24px;
+}
+
+/* ── Responsive ────────────────────────────────────── */
+@container (max-width: 30rem) {
+  .gc-body {
+    flex-direction: column;
+  }
+
+  .gc-task-list {
+    flex: none;
+    border-inline-end: none;
+    border-block-end: 1px solid var(--color-border, #e0e0e0);
+  }
+
+  .gc-task-row {
+    height: auto;
+    padding-block: 4px;
+  }
+
+  .gc-timeline-spacer {
+    display: none;
+  }
+}
+
+/* ── Motion ────────────────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  .gc-bar {
+    transition: none;
+  }
+}
+
+/* ── Print ─────────────────────────────────────────── */
+@media print {
+  gantt-chart[data-upgraded] .gc-container,
+  gantt-chart[data-upgraded] .gc-title {
+    display: none;
+  }
+
+  gantt-chart[data-upgraded] .gc-sr-only {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+    white-space: normal;
+  }
+}
+
+/*
+ * View Transition crossfade between rebuilds (theme/data/attribute changes).
+ * The component pins a unique view-transition-name on the host for the
+ * duration of each refresh so the browser captures only the gantt region
+ * and crossfades old → new in one frame budget.
+ */
+::view-transition-old(*),
+::view-transition-new(*) {
+  animation-duration: 220ms;
+  animation-timing-function: ease-out;
+}

package/src/web-components/impact-effort/api.json

@@ -0,0 +1,21 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "impact-effort",
+  "type": "web-component",
+  "description": "2x2 prioritization matrix with drag-and-drop between quadrants (Quick Wins, Big Bets, Fill-Ins, Money Pit)",
+  "htmlvalidate": { "flow": true, "permittedContent": ["@flow"] },
+  "attributes": [
+    { "name": "src",     "kind": "host-api", "purpose": "config", "type": "string",  "description": "URL to JSON data for items" },
+    { "name": "title",   "kind": "host-api", "purpose": "config", "type": "string",  "description": "Optional heading above the matrix" },
+    { "name": "compact", "kind": "host-api", "purpose": "config", "type": "boolean", "description": "Reduced spacing variant" }
+  ],
+  "childAttributes": [
+    { "name": "data-quadrant", "on": "any child", "type": "enum", "values": ["quick-wins", "big-bets", "fill-ins", "money-pit"], "description": "Target quadrant for this item" },
+    { "name": "draggable",     "on": "any child", "type": "boolean", "description": "Required for drag capability" },
+    { "name": "data-id",       "on": "any child", "type": "string",  "description": "Stable identifier for the item" }
+  ],
+  "events": [
+    { "name": "impact-effort:move",  "detail": "{ itemId, from, to, item }",  "description": "Fired when an item is dragged between quadrants" },
+    { "name": "impact-effort:ready", "detail": "{ quadrantCounts }",          "description": "Fired after component initializes" }
+  ]
+}