beads-ui 0.1.2 → 0.3.0

package/app/styles.css

@@ -64,7 +64,22 @@
   --pre-fg: #e5e7eb;
 
   /* focus ring */
-  --outline-offset: 6px;
+  --outline-offset-l: 6px;
+  --outline-offset-m: 2px;
+  --outline-offset-s: 0px;
+
+  /* Spacing scale (2px baseline) */
+  --space-0: 0;
+  --space-1: 2px;
+  --space-2: 4px;
+  --space-3: 6px;
+  --space-4: 8px;
+  --space-5: 10px;
+  --space-6: 12px;
+  --space-7: 14px;
+  --space-8: 16px;
+  --space-9: 18px;
+  --space-10: 20px;
 }
 
 html,
@@ -98,20 +113,21 @@ body {
 
 a {
   color: var(--link);
-}
-a:visited {
-  color: var(--link-visited);
-}
-a:hover,
-a:focus {
-  color: var(--link-hover);
+
+  &:visited {
+    color: var(--link-visited);
+  }
+  &:hover,
+  &:focus {
+    color: var(--link-hover);
+  }
 }
 
 .app-header {
   position: sticky;
   top: 0;
   z-index: 50;
-  padding: 12px 18px 0 18px;
+  padding: var(--space-6) var(--space-9) 0 var(--space-9);
   border-bottom: 1px solid var(--border);
   display: flex;
   align-items: start;
@@ -133,87 +149,94 @@ a:focus {
 .header-left {
   display: flex;
   align-items: baseline;
-  gap: 12px;
+  gap: var(--space-6);
 }
 
 /* Header navigation tabs (sit next to title) */
 .header-nav {
   display: flex;
   align-items: flex-end;
-  gap: 6px;
-}
-.header-nav .tab {
-  display: inline-block;
-  padding: 8px 12px 9px;
-  color: var(--muted);
-  text-decoration: none;
-  font-weight: 600;
-  border: 1px solid transparent;
-  border-top-left-radius: 8px;
-  border-top-right-radius: 8px;
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  line-height: 1.2;
-}
-.header-nav .tab:hover,
-.header-nav .tab:focus {
-  color: var(--fg);
-}
-.header-nav .tab.active {
-  color: var(--fg);
-  background: var(--bg);
-  border-color: var(--border);
-  /* Blend into the page content below the header by covering the header border */
-  border-bottom-color: var(--bg);
-  margin-bottom: -1px; /* overlap header bottom border */
-  padding-bottom: 10px;
-  position: relative;
-  z-index: 1;
+  gap: var(--space-3);
+
+  .tab {
+    display: inline-block;
+    padding: var(--space-4) var(--space-6) 9px;
+    color: var(--muted);
+    text-decoration: none;
+    font-weight: 600;
+    border: 1px solid transparent;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+    line-height: 1.2;
+
+    &:hover,
+    &:focus {
+      color: var(--fg);
+      outline-offset: var(--outline-offset-s);
+    }
+
+    &.active {
+      color: var(--fg);
+      background: var(--bg);
+      border-color: var(--border);
+      /* Blend into the page content below the header by covering the header border */
+      border-bottom-color: var(--bg);
+      margin-bottom: -1px; /* overlap header bottom border */
+      padding-bottom: 10px;
+      position: relative;
+      z-index: 1;
+    }
+  }
 }
 
 .header-actions {
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-5);
 }
 .theme-toggle {
   display: inline-flex;
   align-items: center;
-  gap: 6px;
+  gap: var(--space-3);
   font-size: 12px;
   color: var(--muted);
-}
-.theme-toggle input[type='checkbox'] {
-  --switch-h: 22px;
-  appearance: none;
-  position: relative;
-  width: 44px;
-  height: var(--switch-h);
-  border-radius: var(--switch-h);
-  border: 1px solid var(--control-border);
-  background: var(--control-bg);
-  transition:
-    background 160ms ease,
-    border-color 160ms ease;
-  cursor: pointer;
-}
-.theme-toggle input[type='checkbox']::after {
-  content: '';
-  position: absolute;
-  top: 50%;
-  left: 2px;
-  width: calc(var(--switch-h) - 6px);
-  height: calc(var(--switch-h) - 6px);
-  border-radius: 999px;
-  background: var(--button-bg);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
-  transform: translate(0, -50%);
-  transition: transform 180ms ease;
-}
-.theme-toggle input[type='checkbox']:checked::after {
-  left: auto;
-  right: 2px;
-  transform: translate(0, -50%);
+
+  input[type='checkbox'] {
+    --switch-h: 22px;
+    appearance: none;
+    position: relative;
+    width: 44px;
+    height: var(--switch-h);
+    border-radius: var(--switch-h);
+    border: 1px solid var(--control-border);
+    background: var(--control-bg);
+    transition:
+      background 160ms ease,
+      border-color 160ms ease;
+    cursor: pointer;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 2px;
+      width: calc(var(--switch-h) - 6px);
+      height: calc(var(--switch-h) - 6px);
+      border-radius: 999px;
+      background: var(--button-bg);
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+      transform: translate(0, -50%);
+      transition: transform 180ms ease;
+    }
+
+    &:checked::after {
+      left: auto;
+      right: 2px;
+      transform: translate(0, -50%);
+    }
+  }
 }
 
 .app-shell {
@@ -227,16 +250,20 @@ a:focus {
 }
 
 /* Board route: fill height and let columns scroll */
-.route.board {
-  display: flex;
-  flex-direction: column;
-  min-height: 0;
-  max-height: 100%;
-}
-.route.board .panel__body {
-  flex: 1;
-  min-height: 0;
-  overflow-x: auto; /* scroll columns horizontal */
+.route {
+  &.board {
+    display: flex;
+    flex-direction: column;
+    min-height: 0;
+    height: 100%;
+    max-height: 100%;
+
+    .panel__body {
+      flex: 1;
+      min-height: 0;
+      overflow-x: auto; /* scroll columns horizontal */
+    }
+  }
 }
 
 .panel {
@@ -253,13 +280,13 @@ a:focus {
   background: inherit;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: var(--space-5);
   min-height: 44px;
-  padding: 6px 18px;
+  padding: var(--space-3) var(--space-9);
 }
 
 #detail-panel .panel__header {
-  padding-left: 18px;
+  padding-left: var(--space-9);
 }
 
 .muted {
@@ -279,61 +306,63 @@ a:focus {
 }
 .editable:hover {
   outline: 2px solid var(--control-border, var(--border));
-  outline-offset: var(--outline-offset);
+  outline-offset: var(--outline-offset-l);
 }
 .editable:focus-within {
-  outline: 2px solid #93c5fd;
-  outline-offset: var(--outline-offset);
+  outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
+  outline-offset: var(--outline-offset-l);
   cursor: text;
 }
 .editable-actions {
-  margin-top: 6px;
+  margin-top: var(--space-3);
   display: flex;
-  gap: 8px;
+  gap: var(--space-4);
 }
 
 /* Minimal markdown styles */
-.md h1 {
-  font-size: 20px;
-  margin: 12px 0 6px;
-}
-.md h2 {
-  font-size: 18px;
-  margin: 12px 0 6px;
-}
-.md h3 {
-  font-size: 16px;
-  margin: 10px 0 6px;
-}
-.md h4 {
-  font-size: 15px;
-  margin: 8px 0 4px;
-}
-.md h5,
-.md h6 {
-  font-size: 14px;
-  margin: 6px 0 4px;
-}
-.md p {
-  margin: 6px 0;
-}
-.md ul,
-.md ol {
-  margin: 6px 0 6px 14px;
-  padding-left: 14px;
-}
-.md code {
-  background: var(--code-bg);
-  color: var(--code-fg);
-  padding: 3px 4px;
-  border-radius: 3px;
-}
-.md pre {
-  background: var(--pre-bg);
-  color: var(--pre-fg);
-  padding: 10px;
-  overflow: auto;
-  border-radius: 6px;
+.md {
+  h1 {
+    font-size: 20px;
+    margin: var(--space-6) 0 var(--space-3);
+  }
+  h2 {
+    font-size: 18px;
+    margin: var(--space-6) 0 var(--space-3);
+  }
+  h3 {
+    font-size: 16px;
+    margin: var(--space-5) 0 var(--space-3);
+  }
+  h4 {
+    font-size: 15px;
+    margin: var(--space-4) 0 var(--space-2);
+  }
+  h5,
+  h6 {
+    font-size: 14px;
+    margin: var(--space-3) 0 var(--space-2);
+  }
+  p {
+    margin: var(--space-3) 0;
+  }
+  ul,
+  ol {
+    margin: var(--space-3) 0 var(--space-3) var(--space-7);
+    padding-left: var(--space-7);
+  }
+  code {
+    background: var(--code-bg);
+    color: var(--code-fg);
+    padding: 3px var(--space-2);
+    border-radius: 3px;
+  }
+  pre {
+    background: var(--pre-bg);
+    color: var(--pre-fg);
+    padding: var(--space-5);
+    overflow: auto;
+    border-radius: 6px;
+  }
 }
 
 /* Form controls */
@@ -346,7 +375,7 @@ textarea {
   color: var(--control-fg, var(--fg));
   border: 1px solid var(--control-border, var(--border));
   border-radius: 4px;
-  padding: 4px 6px;
+  padding: var(--space-2) var(--space-3);
   line-height: 2;
   transition:
     border-color 160ms ease,
@@ -376,7 +405,7 @@ button {
   background: var(--button-bg, #f3f4f6);
   color: var(--button-fg, var(--fg));
   border: 1px solid var(--button-border, var(--border));
-  padding: 4px 8px;
+  padding: var(--space-2) var(--space-4);
   border-radius: 4px;
   cursor: pointer;
   transition:
@@ -385,6 +414,19 @@ button {
     border-color 140ms ease,
     transform 60ms ease;
 }
+/* Inline issue ID renderer: looks like plain text */
+button.id-copy {
+  background: transparent;
+  color: inherit;
+  border: none;
+  padding: 0;
+  margin: 0;
+  line-height: inherit;
+  font: inherit;
+}
+button.id-copy:hover {
+  text-decoration: underline;
+}
 button:hover {
   filter: brightness(1.02);
 }
@@ -413,7 +455,7 @@ button:disabled {
   cursor: default;
 }
 .type-badge + .type-badge {
-  margin-left: 4px;
+  margin-left: var(--space-2);
 }
 .type-badge--neutral {
   background: var(--badge-bg-neutral);
@@ -460,7 +502,7 @@ button:disabled {
 .status-badge + .status-badge,
 .priority-badge + .priority-badge,
 .badge-select + .badge-select {
-  margin-left: 4px;
+  margin-left: var(--space-2);
 }
 
 /* Status + Priority palette (light) derived from base */
@@ -671,7 +713,7 @@ html[data-theme='dark'] {
 }
 .badge-select:focus {
   outline: 2px solid color-mix(in srgb, var(--link) 50%, transparent);
-  outline-offset: 2px;
+  outline-offset: var(--outline-offset-m);
   box-shadow: none;
 }
 
@@ -687,8 +729,8 @@ input.inline-edit {
   outline-offset: var(--outline-offset);
 }
 input.inline-edit:focus {
-  outline: 2px solid #93c5fd;
-  outline-offset: var(--outline-offset);
+  outline: 2px solid color-mix(in srgb, var(--link) 50%, transparent);
+  outline-offset: var(--outline-offset-l);
   box-shadow: none;
 }
 
@@ -739,7 +781,7 @@ input.inline-edit:focus {
 /* Keyboard focus ring helper */
 :focus-visible {
   outline: 2px solid color-mix(in srgb, var(--link) 60%, transparent);
-  outline-offset: var(--outline-offset);
+  outline-offset: var(--outline-offset-m);
 }
 
 /* Subtle scrollbars (WebKit/Blink) */
@@ -779,6 +821,7 @@ input.inline-edit:focus {
 
 /* Spacing for acceptance and notes sections in details */
 #detail-root .acceptance,
+#detail-root .design,
 #detail-root .notes {
   margin-top: 32px;
 }
@@ -791,10 +834,17 @@ input.inline-edit:focus {
   line-height: inherit;
 }
 /* Title input fills available width and stays inline with buttons */
-#detail-root .detail-title input[type='text'] {
-  flex: 1 1 auto;
+#detail-root .detail-title h2 {
+  display: flex;
+  align-items: center;
+}
+#detail-root .detail-title h2 input[type='text'] {
+  flex: 1;
   padding: 0;
   min-width: 10px;
+  font-size: inherit;
+  line-height: inherit;
+  margin-right: 8px;
 }
 /* Remove borders in detail view; rely on global :focus-visible outline */
 #detail-root input[type='text'],
@@ -802,7 +852,7 @@ input.inline-edit:focus {
   border: none;
   background: transparent;
   outline: 2px solid var(--control-border, var(--border));
-  outline-offset: var(--outline-offset);
+  outline-offset: var(--outline-offset-l);
 }
 #detail-root input[type='text']:focus,
 #detail-root textarea:focus {
@@ -830,49 +880,54 @@ input.inline-edit:focus {
 .epic-header {
   display: flex;
   align-items: center;
-  gap: 8px;
-  padding: 10px 12px;
+  gap: var(--space-4);
+  padding: var(--space-5) var(--space-6);
   cursor: pointer;
   background: color-mix(in srgb, var(--panel-bg) 90%, transparent);
   border-bottom: 1px solid var(--border);
-}
-.epic-header:hover {
-  background: color-mix(in srgb, var(--control-bg) 60%, transparent);
+
+  &:hover {
+    background: color-mix(in srgb, var(--control-bg) 60%, transparent);
+  }
+
+  /* Compact native progress for epic status */
+  progress {
+    width: 140px;
+    height: 8px;
+    accent-color: var(--status-closed-base);
+  }
 }
 .epic-children {
   padding: 8px 12px 12px;
 }
-/* Compact native progress for epic status */
-.epic-header progress {
-  width: 140px;
-  height: 8px;
-  accent-color: var(--status-closed-base);
-}
 .table {
   width: 100%;
   border-collapse: collapse;
   table-layout: fixed; /* keep column proportions stable while editing */
-}
-.table th,
-.table td {
-  text-align: left;
-  padding: 12px 16px;
-  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
-}
-/* Ensure form controls fill the cell */
-.table td input[type='text'],
-.table td select {
-  width: 100%;
-  box-sizing: border-box;
-}
-.table td .editable {
-  display: block;
-  width: 100%;
-}
-.table th {
-  font-size: 12px;
-  color: var(--muted);
-  font-weight: 600;
+
+  th,
+  td {
+    text-align: left;
+    padding: var(--space-6) var(--space-8);
+    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
+  }
+  /* Ensure form controls fill the cell */
+  td {
+    input[type='text'],
+    select {
+      width: 100%;
+      box-sizing: border-box;
+    }
+    .editable {
+      display: block;
+      width: 100%;
+    }
+  }
+  th {
+    font-size: 12px;
+    color: var(--muted);
+    font-weight: 600;
+  }
 }
 .epic-row:hover {
   background: color-mix(in srgb, var(--control-bg) 55%, transparent);
@@ -882,8 +937,8 @@ input.inline-edit:focus {
 .board-root {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
-  gap: 16px;
-  padding: 12px;
+  gap: var(--space-8);
+  padding: var(--space-6);
 }
 .board-column {
   display: flex;
@@ -896,6 +951,10 @@ input.inline-edit:focus {
   background: color-mix(in srgb, var(--panel-bg) 92%, transparent);
 }
 .board-column__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
   position: sticky;
   top: 0;
   z-index: 1;
@@ -905,20 +964,31 @@ input.inline-edit:focus {
   background: inherit;
   backdrop-filter: saturate(140%) blur(4px);
 }
+/* Small, unobtrusive select for closed filter */
+.board-closed-filter {
+  margin: calc(var(--space-4) * -1) 0;
+
+  select {
+    font-size: 13px;
+    border-radius: 999px;
+    border-color: var(--border);
+    padding: 2px 18px 2px 12px;
+  }
+}
 .board-column__body {
-  padding: 10px;
+  padding: var(--space-5);
   overflow: visible;
   display: flex;
   flex-direction: column;
   /* UI-77: increase vertical spacing between card rows */
-  gap: 14px;
+  gap: var(--space-7);
 }
 .board-card {
   /* UI-76: remove borders and match page body background */
   border: none;
   border-radius: 6px;
   /* UI-77: increase internal padding for readability */
-  padding: 12px 14px;
+  padding: var(--space-6) var(--space-7);
   /* Match the body background so cards feel integrated */
   background: var(--bg);
   cursor: pointer;
@@ -936,17 +1006,21 @@ input.inline-edit:focus {
     0 2px 8px color-mix(in srgb, #000 16%, transparent),
     0 4px 16px color-mix(in srgb, #000 12%, transparent);
 }
+.board-card:focus {
+  outline: 2px solid color-mix(in srgb, var(--link) 50%, transparent);
+  outline-offset: var(--outline-offset-s);
+}
 .board-card__title {
   font-weight: 600;
-  margin-bottom: 4px;
+  margin-bottom: var(--space-2);
 }
 .board-card__meta {
-  margin-top: 8px;
+  margin-top: var(--space-4);
   font-size: 12px;
   color: var(--muted);
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: var(--space-4);
 }
 
 @media (max-width: 1100px) {
@@ -955,6 +1029,16 @@ input.inline-edit:focus {
   }
 }
 
+/* a11y helper */
+.visually-hidden {
+  position: absolute !important;
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  clip: rect(1px, 1px, 1px, 1px);
+  white-space: nowrap;
+}
+
 @media (prefers-color-scheme: dark) {
   :root {
     --fg: #e5e7eb;
@@ -1152,7 +1236,7 @@ html[data-theme='dark'] {
 }
 .detail-side {
   position: sticky;
-  top: 70px;
+  top: 18px;
 }
 .detail-main h2 {
   font-size: 28px;
@@ -1220,6 +1304,14 @@ html[data-theme='dark'] {
   padding: 0;
   margin: 0 0 8px;
 }
+.props-card ul li {
+  display: grid;
+  grid-template-columns: auto auto 1fr auto;
+  gap: 6px;
+  align-items: center;
+  padding: 2px 0;
+  cursor: pointer;
+}
 .props-card__title {
   font-weight: 700;
   font-size: 13px;
@@ -1248,6 +1340,103 @@ html[data-theme='dark'] {
   gap: 8px;
 }
 
+/* --- Issue Details Dialog (UI-104) --- */
+#issue-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  width: min(96vw, 1200px);
+  max-height: 96vh;
+  margin: 2vh auto;
+  overflow: hidden;
+}
+#issue-dialog::backdrop {
+  background: color-mix(in srgb, #000 45%, transparent);
+  backdrop-filter: blur(1px);
+}
+.issue-dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.issue-dialog__title {
+  font-weight: 700;
+}
+.issue-dialog__close {
+  border-radius: 4px;
+  padding: 4px 8px;
+  min-width: 28px;
+  line-height: 1.2;
+}
+.issue-dialog__body {
+  min-height: 200px;
+  max-height: calc(96vh - 44px);
+  overflow: auto;
+}
+
+.new-issue__body {
+  padding: 12px;
+}
+.new-issue__form {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+  gap: 10px 12px;
+  align-items: center;
+}
+.new-issue__form label {
+  color: var(--muted);
+  font-size: 12px;
+}
+.new-issue__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 8px;
+}
+.new-issue__error {
+  color: var(--danger, #b00020);
+  font-size: 12px;
+}
+
+/* --- New Issue Dialog (UI-106) --- */
+#new-issue-dialog {
+  padding: 0;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--bg);
+  color: var(--fg);
+  width: min(640px, 96vw);
+  max-height: 96vh;
+  margin: 2vh auto;
+  overflow: hidden;
+}
+#new-issue-dialog::backdrop {
+  background: color-mix(in srgb, #000 45%, transparent);
+  backdrop-filter: blur(1px);
+}
+.new-issue__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  padding: 8px 12px;
+  border-bottom: 1px solid var(--border);
+}
+.new-issue__title {
+  font-weight: 700;
+}
+.new-issue__close {
+  border-radius: 4px;
+  padding: 4px 8px;
+  min-width: 28px;
+  line-height: 1.2;
+}
+
 .prop.labels {
   align-items: start;
 }