@forwardimpact/pathway 0.21.0 → 0.23.0

package/src/css/components/tables.css

@@ -1,362 +0,0 @@
-/**
- * Table Components
- *
- * Base table styles for all table variants.
- */
-
-@layer components {
-  /* Table container */
-  .table-container {
-    overflow-x: auto;
-    background: var(--color-surface);
-    border-radius: var(--radius-lg);
-    box-shadow: var(--shadow-md);
-  }
-
-  /* Base table */
-  .table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .table th,
-  .table td {
-    padding: var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .table th {
-    background: var(--color-bg);
-    font-weight: 600;
-    color: var(--color-text-muted);
-    font-size: var(--font-size-sm);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-  }
-
-  .table tr:last-child td {
-    border-bottom: none;
-  }
-
-  .table tr:hover td {
-    background: var(--color-bg);
-  }
-
-  /* Standard table column widths */
-  .table .col-name {
-    width: 20%;
-    min-width: 160px;
-  }
-
-  .table .col-capability {
-    width: 100px;
-    min-width: 100px;
-  }
-
-  .table .col-type {
-    width: 90px;
-    min-width: 90px;
-  }
-
-  .table .col-level {
-    width: 120px;
-    min-width: 120px;
-    text-align: center;
-  }
-
-  .table .col-change {
-    width: 70px;
-    min-width: 70px;
-    text-align: center;
-  }
-
-  .table .col-description {
-    width: auto;
-    min-width: 200px;
-  }
-
-  /* Data table */
-  .data-table {
-    width: 100%;
-    border-collapse: collapse;
-  }
-
-  .data-table th,
-  .data-table td {
-    padding: var(--space-sm) var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .data-table th {
-    background: var(--color-bg);
-    font-weight: 600;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-  }
-
-  .data-table tbody tr {
-    transition: background-color 0.2s ease;
-  }
-
-  .data-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  .data-table tr:last-child td {
-    border-bottom: none;
-  }
-
-  .data-table .col-narrow {
-    width: 100px;
-  }
-
-  .data-table .col-medium {
-    width: 150px;
-  }
-
-  .data-table .col-center {
-    text-align: center;
-  }
-
-  /* Level table */
-  .level-table {
-    width: 100%;
-    border-collapse: separate;
-    border-spacing: 0;
-    margin-top: var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    overflow: hidden;
-    background: var(--color-surface);
-  }
-
-  .level-table th,
-  .level-table td {
-    padding: var(--space-md) var(--space-lg);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .level-table th {
-    font-weight: 600;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-secondary);
-    background: var(--color-bg);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-  }
-
-  .level-table th:first-child {
-    width: 180px;
-  }
-
-  .level-table tbody tr {
-    transition: background-color 0.2s ease;
-  }
-
-  .level-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  .level-table tbody tr:last-child td {
-    border-bottom: none;
-  }
-
-  .level-table td:first-child {
-    font-weight: 500;
-    color: var(--color-text);
-  }
-
-  /* Progression table */
-  .progression-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: var(--space-md);
-  }
-
-  .progression-table th,
-  .progression-table td {
-    padding: var(--space-md);
-    text-align: left;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .progression-table th {
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    background: var(--color-bg);
-  }
-
-  .progression-table tbody tr {
-    transition: background-color 0.2s ease;
-  }
-
-  .progression-table tbody tr:hover {
-    background: var(--color-bg);
-  }
-
-  .progression-table tr:last-child td {
-    border-bottom: none;
-  }
-
-  /* Progression table column widths */
-  .progression-table th:first-child,
-  .progression-table td:first-child {
-    width: 20%;
-    min-width: 160px;
-  }
-
-  /* Skills table: 6 columns (Name, Capability, Type, Current, Target, Change) */
-  .progression-table.skill-table th:nth-child(2),
-  .progression-table.skill-table td:nth-child(2) {
-    width: 100px;
-  }
-
-  .progression-table.skill-table th:nth-child(3),
-  .progression-table.skill-table td:nth-child(3) {
-    width: 90px;
-  }
-
-  .progression-table.skill-table th:nth-child(4),
-  .progression-table.skill-table td:nth-child(4),
-  .progression-table.skill-table th:nth-child(5),
-  .progression-table.skill-table td:nth-child(5) {
-    width: 120px;
-    text-align: center;
-  }
-
-  .progression-table.skill-table th:nth-child(6),
-  .progression-table.skill-table td:nth-child(6) {
-    width: 70px;
-    text-align: center;
-  }
-
-  /* Behaviour table: 4 columns (Name, Current, Target, Change) */
-  .progression-table.behaviour-table th:nth-child(2),
-  .progression-table.behaviour-table td:nth-child(2),
-  .progression-table.behaviour-table th:nth-child(3),
-  .progression-table.behaviour-table td:nth-child(3) {
-    width: 120px;
-    text-align: center;
-  }
-
-  .progression-table.behaviour-table th:nth-child(4),
-  .progression-table.behaviour-table td:nth-child(4) {
-    width: 70px;
-    text-align: center;
-  }
-
-  /* Matrix tables */
-  .matrix-table th:first-child,
-  .matrix-table td:first-child {
-    width: 25%;
-    min-width: 220px;
-  }
-
-  .matrix-table th:nth-child(2),
-  .matrix-table td:nth-child(2) {
-    width: 100px;
-  }
-
-  .matrix-table th:nth-child(3),
-  .matrix-table td:nth-child(3) {
-    width: 90px;
-  }
-
-  .matrix-table th:nth-child(4),
-  .matrix-table td:nth-child(4) {
-    width: 120px;
-    text-align: center;
-  }
-
-  .matrix-table th:last-child,
-  .matrix-table td:last-child {
-    width: auto;
-  }
-
-  /* Behaviour matrix */
-  .matrix-table.behaviour-matrix th:nth-child(2),
-  .matrix-table.behaviour-matrix td:nth-child(2) {
-    width: 120px;
-    text-align: center;
-  }
-
-  /* Levels table */
-  .levels-table th:first-child,
-  .levels-table td:first-child {
-    width: 120px;
-    text-align: center;
-  }
-
-  .levels-table td.level-cell {
-    text-align: center;
-    vertical-align: middle;
-  }
-
-  .levels-table td.level-cell .level-bar {
-    display: inline-flex;
-    justify-content: center;
-  }
-
-  .levels-table td.level-cell .level-label {
-    display: block;
-    font-size: var(--font-size-xs);
-    color: var(--color-text-muted);
-    margin-top: 2px;
-  }
-
-  /* Modifier tables */
-  .modifier-table th:last-child,
-  .modifier-table td:last-child {
-    width: 100px;
-    text-align: center;
-  }
-
-  /* Human-only skill indicators */
-  .human-only-row {
-    background: rgba(254, 243, 199, 0.3);
-  }
-
-  .human-only-indicator {
-    font-size: var(--font-size-xs);
-    opacity: 0.8;
-    cursor: help;
-  }
-
-  /* Lists */
-  .item-list {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  .item-list li {
-    padding: var(--space-sm) 0;
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  .item-list li:last-child {
-    border-bottom: none;
-  }
-
-  .item-list-compact li {
-    padding: var(--space-xs) 0;
-  }
-
-  /* Related lists */
-  .related-list {
-    list-style: disc;
-    padding-left: var(--space-lg);
-    margin: var(--space-md) 0;
-  }
-
-  .related-list li {
-    padding: var(--space-xs) 0;
-    color: var(--color-text);
-  }
-}

package/src/css/components/top-bar.css

@@ -1,180 +0,0 @@
-/**
- * Top Bar
- *
- * Fixed bar across the top of the viewport with sidebar toggle and
- * CLI command display. Inspired by Safari's URL bar + sidebar layout.
- */
-
-@layer components {
-  /* --------------------------------------------------------------------------
-   Bar container - fixed across top
-   -------------------------------------------------------------------------- */
-  .top-bar {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: var(--top-bar-height);
-    z-index: 200;
-    display: flex;
-    align-items: center;
-    gap: var(--space-sm);
-    padding: 0 var(--space-sm);
-    background: var(--color-surface);
-    border-bottom: 1px solid var(--color-border);
-  }
-
-  /* --------------------------------------------------------------------------
-   Sidebar toggle button
-   -------------------------------------------------------------------------- */
-  .top-bar__toggle {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 36px;
-    height: 36px;
-    border: none;
-    border-radius: var(--radius-md);
-    background: transparent;
-    color: var(--color-text-muted);
-    cursor: pointer;
-    transition:
-      background 0.15s,
-      color 0.15s;
-  }
-
-  .top-bar__toggle:hover {
-    background: var(--color-bg-secondary);
-    color: var(--color-text);
-  }
-
-  .top-bar__toggle:active {
-    background: var(--color-border);
-  }
-
-  /* Sidebar icon: simple sidebar SVG */
-  .top-bar__toggle svg {
-    width: 18px;
-    height: 18px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 1.5;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  /* Highlight toggle when drawer is open */
-  .drawer-open .top-bar__toggle {
-    color: var(--color-primary);
-    background: rgba(59, 130, 246, 0.08);
-  }
-
-  /* --------------------------------------------------------------------------
-   Command bar (mimics Safari-style URL bar)
-   -------------------------------------------------------------------------- */
-  .top-bar__command {
-    width: 100%;
-    max-width: 800px;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    height: 36px;
-    padding: 0 var(--space-sm) 0 var(--space-md);
-    border: 1px solid var(--color-border);
-    border-radius: var(--radius-lg);
-    transition:
-      border-color 0.15s,
-      box-shadow 0.15s;
-    gap: var(--space-xs);
-  }
-
-  .top-bar__command:hover {
-    border-color: var(--color-text-light);
-  }
-
-  .top-bar__command:focus-within {
-    border-color: var(--color-primary);
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
-  }
-
-  /* Terminal prompt icon */
-  .top-bar__prompt {
-    flex-shrink: 0;
-    font-size: var(--font-size-sm);
-    color: var(--color-text-light);
-    user-select: none;
-  }
-
-  /* CLI command text */
-  .top-bar__command-text {
-    flex: 1;
-    min-width: 0;
-    font-family: var(--font-family-mono);
-    font-size: var(--font-size-xs);
-    color: var(--color-text-secondary);
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    user-select: all;
-    line-height: 36px;
-  }
-
-  /* Copy button inside the command bar */
-  .top-bar__copy {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 28px;
-    height: 28px;
-    border: none;
-    border-radius: var(--radius-sm);
-    background: transparent;
-    color: var(--color-text-light);
-    cursor: pointer;
-    transition:
-      background 0.15s,
-      color 0.15s;
-  }
-
-  .top-bar__copy:hover {
-    background: var(--color-border);
-    color: var(--color-text);
-  }
-
-  .top-bar__copy svg {
-    width: 14px;
-    height: 14px;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  /* Copied state */
-  .top-bar__copy.copied {
-    color: var(--color-success);
-  }
-
-  .top-bar__copy.copied svg {
-    /* Swap from copy icon to checkmark via CSS — JS swaps the class */
-  }
-
-  /* --------------------------------------------------------------------------
-   Layout adjustments - push content below the top bar
-   -------------------------------------------------------------------------- */
-  .app-body {
-    padding-top: var(--top-bar-height);
-  }
-
-  /* --------------------------------------------------------------------------
-   Mobile tweaks
-   -------------------------------------------------------------------------- */
-  @media (max-width: 768px) {
-    .top-bar__prompt {
-      display: none;
-    }
-  }
-}

package/src/css/components/typography.css

@@ -1,121 +0,0 @@
-/**
- * Typography Utilities
- *
- * Text styles, labels, and typography utilities.
- */
-
-@layer components {
-  /* Labels - small uppercase text (consolidated definition) */
-  .label,
-  .detail-item-label,
-  .stat-label,
-  .expectation-label,
-  .filter-title {
-    font-size: var(--font-size-sm);
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-    letter-spacing: 0.025em;
-  }
-
-  .label-xs {
-    font-size: var(--font-size-xs);
-  }
-
-  /* Match score label uses smaller font */
-  .score-label {
-    font-size: var(--font-size-xs);
-    color: var(--color-text-muted);
-    text-transform: uppercase;
-  }
-
-  /* Labels with bottom margin */
-  .detail-item-label,
-  .expectation-label {
-    margin-bottom: var(--space-xs);
-  }
-
-  /* Filter title has bold weight and wider letter-spacing */
-  .filter-title {
-    font-weight: 600;
-    color: var(--color-text-secondary);
-    letter-spacing: 0.05em;
-  }
-
-  /* Text colors */
-  .text-muted {
-    color: var(--color-text-muted);
-  }
-
-  .text-light {
-    color: var(--color-text-light);
-  }
-
-  .text-primary {
-    color: var(--color-primary);
-  }
-
-  .text-success {
-    color: var(--color-success);
-  }
-
-  .text-warning {
-    color: var(--color-warning);
-  }
-
-  .text-error {
-    color: var(--color-error);
-  }
-
-  /* Text alignment */
-  .text-center {
-    text-align: center;
-  }
-
-  .text-right {
-    text-align: right;
-  }
-
-  /* Font sizes */
-  .text-xs {
-    font-size: var(--font-size-xs);
-  }
-
-  .text-sm {
-    font-size: var(--font-size-sm);
-  }
-
-  .text-lg {
-    font-size: var(--font-size-lg);
-  }
-
-  .text-xl {
-    font-size: var(--font-size-xl);
-  }
-
-  .text-2xl {
-    font-size: var(--font-size-2xl);
-  }
-
-  /* Font weight */
-  .font-medium {
-    font-weight: 500;
-  }
-
-  .font-semibold {
-    font-weight: 600;
-  }
-
-  .font-bold {
-    font-weight: 700;
-  }
-
-  /* Code inline */
-  .code-inline {
-    font-family: var(--font-family-mono);
-    font-size: 0.9em;
-    background: var(--color-bg);
-    padding: 0.1em 0.4em;
-    border-radius: var(--radius-sm);
-    border: 1px solid var(--color-border);
-  }
-}

package/src/css/components/utilities.css

@@ -1,41 +0,0 @@
-/**
- * Utility Classes
- *
- * Spacing utilities and helper classes.
- */
-
-@layer utilities {
-  /* Margin top */
-  .mt-sm {
-    margin-top: var(--space-sm);
-  }
-
-  .mt-md {
-    margin-top: var(--space-md);
-  }
-
-  .mt-lg {
-    margin-top: var(--space-lg);
-  }
-
-  .mt-xl {
-    margin-top: var(--space-xl);
-  }
-
-  /* Margin bottom */
-  .mb-sm {
-    margin-bottom: var(--space-sm);
-  }
-
-  .mb-md {
-    margin-bottom: var(--space-md);
-  }
-
-  .mb-lg {
-    margin-bottom: var(--space-lg);
-  }
-
-  .mb-xl {
-    margin-bottom: var(--space-xl);
-  }
-}