@profpowell/vb-project-planning 0.1.0

package/src/web-components/review-surface/static.html

@@ -0,0 +1,33 @@
+<!--
+  review-surface — static (zero-JS) form
+  Without JS, child content renders normally.
+  Pin data can be listed as a fallback <ol>.
+-->
+<review-surface
+  editable
+  adapter="local"
+  storage-key="demo-review"
+  author="Sarah Chen">
+
+  <img src="/comps/landing-page-v3.png"
+       alt="Landing page design comp"
+       width="800" height="600" />
+
+  <ol slot="pins-fallback">
+    <li>
+      <strong>Sarah Chen</strong> (42%, 18%):
+      Header alignment is off — needs 8px left padding
+    </li>
+    <li>
+      <strong>Tom Rivera</strong> (67%, 55%):
+      CTA button colour doesn't match the brand guide
+      <ul>
+        <li><strong>Sarah Chen</strong>: Updated in v2 — please re-check</li>
+      </ul>
+    </li>
+    <li>
+      <strong>Sarah Chen</strong> (15%, 82%):
+      Footer links need to match the nav order
+    </li>
+  </ol>
+</review-surface>

package/src/web-components/review-surface/styles.js

@@ -0,0 +1,459 @@
+/**
+ * Shadow DOM styles for <review-surface>
+ *
+ * Uses 3-tier custom property pattern:
+ *   --review-surface-*  (author override)
+ *   --color-*           (VB theme token)
+ *   #fallback           (hardcoded default)
+ */
+const styles = `
+  :host {
+    display: block;
+    position: relative;
+    font-family: var(--_font-sans);
+    line-height: 1.5;
+    color: var(--_text);
+    container-type: inline-size;
+
+    --_bg:          var(--review-surface-bg, var(--color-surface, #ffffff));
+    --_card:        var(--review-surface-card, var(--color-surface-raised, #f8f9fa));
+    --_border:      var(--review-surface-border, var(--color-border, #e0e0e0));
+    --_text:        var(--review-surface-text, var(--color-text, #1a1a1a));
+    --_muted:       var(--review-surface-muted, var(--color-text-muted, #666666));
+    --_accent:      var(--review-surface-accent, var(--color-interactive, #0066cc));
+    --_pin-bg:      var(--review-surface-pin-bg, var(--color-interactive, #0066cc));
+    --_pin-text:    var(--review-surface-pin-text, #ffffff);
+    --_pin-size:    var(--review-surface-pin-size, 28px);
+    --_resolved:    var(--review-surface-resolved, var(--color-success, #16a34a));
+    --_radius:      var(--review-surface-radius, var(--radius-xl, 1rem));
+    --_radius-m:    var(--review-surface-radius-m, var(--radius-m, 0.5rem));
+    --_radius-full: var(--review-surface-radius-full, var(--radius-full, 9999px));
+    --_font-sans:   var(--review-surface-font, var(--font-sans, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif));
+    --_font-xs:     var(--review-surface-font-xs, var(--font-size-xs, 0.75rem));
+    --_font-sm:     var(--review-surface-font-sm, var(--font-size-sm, 0.875rem));
+    --_font-md:     var(--review-surface-font-md, var(--font-size-md, 1rem));
+    --_space-2xs:   var(--review-surface-space-2xs, var(--size-2xs, 0.25rem));
+    --_space-xs:    var(--review-surface-space-xs, var(--size-xs, 0.5rem));
+    --_space-s:     var(--review-surface-space-s, var(--size-s, 0.75rem));
+    --_space-m:     var(--review-surface-space-m, var(--size-m, 1rem));
+    --_space-l:     var(--review-surface-space-l, var(--size-l, 1.5rem));
+    --_duration:    var(--review-surface-duration, var(--duration-normal, 200ms));
+    --_duration-fast: var(--review-surface-duration-fast, var(--duration-fast, 100ms));
+    --_ease:        var(--review-surface-ease, var(--ease-default, ease));
+  }
+
+  *, *::before, *::after { box-sizing: border-box; margin: 0; }
+
+  /* ── Container ───────────────────────────────────── */
+  .rs-container {
+    position: relative;
+    display: grid;
+  }
+
+  .rs-container > ::slotted(*),
+  .rs-container > .rs-overlay {
+    grid-area: 1 / 1;
+  }
+
+  /* ── Overlay ─────────────────────────────────────── */
+  .rs-overlay {
+    position: relative;
+    z-index: 10;
+    pointer-events: none;
+    cursor: default;
+  }
+
+  :host([data-annotating]) .rs-overlay {
+    pointer-events: auto;
+    cursor: crosshair;
+  }
+
+  /* ── Pin markers ─────────────────────────────────── */
+  .rs-pin {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    width: var(--_pin-size);
+    height: var(--_pin-size);
+    border-radius: var(--_radius-full);
+    background: var(--_pin-bg);
+    color: var(--_pin-text);
+    border: 2px solid var(--_pin-text);
+    font-size: var(--_font-xs);
+    font-weight: 700;
+    font-family: inherit;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    pointer-events: auto;
+    padding: 0;
+    line-height: 1;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+    transition: transform var(--_duration-fast) var(--_ease),
+                box-shadow var(--_duration-fast) var(--_ease);
+    z-index: 11;
+  }
+
+  .rs-pin:hover {
+    transform: translate(-50%, -50%) scale(1.15);
+    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
+  }
+
+  .rs-pin:focus-visible {
+    outline: 2px solid var(--_accent);
+    outline-offset: 2px;
+  }
+
+  .rs-pin[data-resolved] {
+    background: var(--_resolved);
+  }
+
+  .rs-pin[data-active] {
+    transform: translate(-50%, -50%) scale(1.2);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--_pin-bg) 30%, transparent);
+  }
+
+  /* ── Popover ─────────────────────────────────────── */
+  .rs-popover {
+    position: absolute;
+    z-index: 20;
+    width: 300px;
+    max-height: 400px;
+    overflow-y: auto;
+    background: var(--_bg);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius-m);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08);
+    padding: 0;
+    opacity: 0;
+    transform: translateY(4px);
+    transition: opacity var(--_duration) var(--_ease), transform var(--_duration) var(--_ease);
+    pointer-events: none;
+  }
+
+  .rs-popover[data-open] {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  .rs-popover__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 12px 8px;
+    border-block-end: 1px solid var(--_border);
+  }
+
+  .rs-popover__title {
+    font-size: var(--_font-sm);
+    font-weight: 700;
+    color: var(--_text);
+  }
+
+  .rs-popover__actions {
+    display: flex;
+    gap: 4px;
+  }
+
+  .rs-popover__btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 26px;
+    height: 26px;
+    border: none;
+    border-radius: 4px;
+    background: transparent;
+    color: var(--_muted);
+    cursor: pointer;
+    padding: 0;
+    transition: background var(--_duration-fast) var(--_ease), color var(--_duration-fast) var(--_ease);
+  }
+
+  .rs-popover__btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rs-popover__btn:hover {
+    background: var(--_border);
+    color: var(--_text);
+  }
+
+  .rs-popover__btn--resolve {
+    color: var(--_resolved);
+  }
+
+  .rs-popover__btn--resolve:hover {
+    background: color-mix(in srgb, var(--_resolved) 15%, transparent);
+  }
+
+  .rs-popover__btn--delete {
+    color: var(--color-error-text, var(--color-error, #dc2626));
+  }
+
+  .rs-popover__btn--delete:hover {
+    background: color-mix(in oklch, var(--color-error, #dc2626) 8%, var(--_card));
+    color: var(--color-error-text, var(--color-error, #dc2626));
+  }
+
+  /* ── Comment thread ──────────────────────────────── */
+  .rs-comment {
+    padding: 10px 12px;
+  }
+
+  .rs-comment__meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-block-end: 4px;
+  }
+
+  .rs-comment__avatar {
+    width: 22px;
+    height: 22px;
+    border-radius: var(--_radius-full);
+    font-size: 10px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-text-inverted, #fff);
+    flex-shrink: 0;
+  }
+
+  .rs-comment__author {
+    font-size: var(--_font-xs);
+    font-weight: 600;
+    color: var(--_text);
+  }
+
+  .rs-comment__time {
+    font-size: 11px;
+    color: var(--_muted);
+  }
+
+  .rs-comment__text {
+    font-size: var(--_font-sm);
+    color: var(--_text);
+    line-height: 1.5;
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* Replies */
+  .rs-replies {
+    border-block-start: 1px solid var(--_border);
+  }
+
+  .rs-reply {
+    padding: 8px 12px;
+    border-block-end: 1px solid color-mix(in srgb, var(--_border) 50%, transparent);
+  }
+
+  .rs-reply:last-child {
+    border-block-end: none;
+  }
+
+  /* ── Input area ──────────────────────────────────── */
+  .rs-input {
+    display: flex;
+    gap: 6px;
+    padding: 8px 12px;
+    border-block-start: 1px solid var(--_border);
+    background: var(--_card);
+    border-radius: 0 0 var(--_radius-m) var(--_radius-m);
+  }
+
+  .rs-input__field {
+    flex: 1;
+    min-height: 32px;
+    max-height: 80px;
+    padding: 6px 10px;
+    border: 1px solid var(--_border);
+    border-radius: 6px;
+    font-family: inherit;
+    font-size: var(--_font-xs);
+    line-height: 1.4;
+    color: var(--_text);
+    background: var(--_bg);
+    resize: none;
+  }
+
+  .rs-input__field:focus {
+    outline: 2px solid var(--_accent);
+    outline-offset: -1px;
+    border-color: var(--_accent);
+  }
+
+  .rs-input__field::placeholder {
+    color: var(--_muted);
+  }
+
+  .rs-input__submit {
+    align-self: flex-end;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    border: none;
+    border-radius: 6px;
+    background: var(--_accent);
+    color: var(--color-text-inverted, #fff);
+    cursor: pointer;
+    padding: 0;
+    flex-shrink: 0;
+    transition: background var(--_duration-fast) var(--_ease);
+  }
+
+  .rs-input__submit svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rs-input__submit:hover {
+    background: color-mix(in srgb, var(--_accent) 85%, #000);
+  }
+
+  .rs-input__submit:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+
+  /* ── Toolbar ─────────────────────────────────────── */
+  .rs-toolbar {
+    display: flex;
+    align-items: center;
+    gap: var(--_space-xs);
+    padding: var(--_space-xs) var(--_space-s);
+    background: var(--_card);
+    border: 1px solid var(--_border);
+    border-radius: var(--_radius-m);
+    margin-block-start: var(--_space-xs);
+  }
+
+  .rs-toolbar__btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 5px;
+    padding: 4px 10px;
+    border: 1px solid var(--_border);
+    border-radius: 6px;
+    background: var(--_bg);
+    color: var(--_text);
+    font-family: inherit;
+    font-size: var(--_font-xs);
+    font-weight: 600;
+    cursor: pointer;
+    line-height: 1;
+    transition: background var(--_duration-fast) var(--_ease),
+                border-color var(--_duration-fast) var(--_ease);
+  }
+
+  .rs-toolbar__btn svg {
+    width: 14px;
+    height: 14px;
+  }
+
+  .rs-toolbar__btn:hover {
+    background: var(--_border);
+  }
+
+  .rs-toolbar__btn[aria-pressed="true"] {
+    background: var(--_accent);
+    color: var(--color-text-inverted, #fff);
+    border-color: var(--_accent);
+  }
+
+  .rs-toolbar__count {
+    font-size: var(--_font-xs);
+    color: var(--_muted);
+    margin-inline-start: auto;
+  }
+
+  /* ── Resolved badge ──────────────────────────────── */
+  .rs-resolved-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    font-size: 11px;
+    font-weight: 600;
+    color: var(--_resolved);
+    padding: 2px 8px;
+    border-radius: var(--_radius-full);
+    background: color-mix(in srgb, var(--_resolved) 12%, transparent);
+  }
+
+  .rs-resolved-badge svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  /* ── Live region ─────────────────────────────────── */
+  .rs-live {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+  }
+
+  /* ── Compact ─────────────────────────────────────── */
+  :host([compact]) {
+    --_pin-size: 22px;
+  }
+
+  :host([compact]) .rs-popover {
+    width: 250px;
+    max-height: 300px;
+  }
+
+  :host([compact]) .rs-toolbar {
+    padding: 3px var(--_space-xs);
+  }
+
+  :host([compact]) .rs-toolbar__btn {
+    font-size: 11px;
+    padding: 3px 8px;
+  }
+
+  /* ── Responsive ──────────────────────────────────── */
+  @container (max-width: 400px) {
+    .rs-popover {
+      width: 240px;
+    }
+
+    .rs-toolbar {
+      flex-wrap: wrap;
+    }
+  }
+
+  /* ── Motion ──────────────────────────────────────── */
+  @media (prefers-reduced-motion: reduce) {
+    .rs-pin,
+    .rs-popover,
+    .rs-toolbar__btn,
+    .rs-popover__btn,
+    .rs-input__submit {
+      transition: none;
+    }
+  }
+
+  /* ── Print ───────────────────────────────────────── */
+  @media print {
+    .rs-overlay,
+    .rs-toolbar,
+    .rs-popover {
+      display: none;
+    }
+  }
+
+  /* ── Utility ─────────────────────────────────────── */
+  .state-msg        { padding: var(--_space-l); font-size: var(--_font-sm); color: var(--_muted); font-style: italic; }
+  .state-msg--error { color: var(--color-error-text, var(--color-error, #dc2626)); }
+`;
+
+export { styles };

package/src/web-components/risk-register/api.json

@@ -0,0 +1,47 @@
+{
+  "$schema": "../../../schemas/api.schema.json",
+  "element": "risk-register",
+  "type": "web-component",
+  "description": "Composing preset that renders a sortable risk table + a likelihood \u00d7 impact quadrant grid from one source",
+  "attributes": [
+    {
+      "name": "src",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "URL to JSON [{ id, title, likelihood, impact, owner, mitigation }]"
+    },
+    {
+      "name": "label",
+      "kind": "host-api",
+      "purpose": "config",
+      "type": "string",
+      "description": "Optional heading shown above the layout"
+    }
+  ],
+  "structure": [
+    {
+      "element": "<template>",
+      "description": "Inline data source: <tr> rows with cells [Title, Likelihood, Impact, Owner, Mitigation]"
+    }
+  ],
+  "childAttributes": [],
+  "events": [
+    {
+      "name": "risk-register:ready",
+      "detail": "{ count }",
+      "description": "Fired after the table + grid render"
+    },
+    {
+      "name": "risk-register:change",
+      "detail": "{ row, field, value }",
+      "description": "Reserved: emitted on inline edits (future)"
+    }
+  ],
+  "htmlvalidate": {
+    "flow": true,
+    "permittedContent": [
+      "@flow"
+    ]
+  }
+}