@webship.co/workspace 0.0.0-stage → 1.0.0-alpha1

package/public/css/base.css

@@ -0,0 +1,260 @@
+/**
+ * The base layer: the brand typefaces, the resets, and the rules that belong to no single
+ * component. No colour is named here — every value comes from the theme's tokens, which is what
+ * lets a theme change the whole dashboard without touching a component.
+ */
+/* Small overrides on top of UIKit (vendor/uikit.min.css) — layout and
+ * components come from UIKit; this file adds the brand palette, chat
+ * bubbles, working indicators, and the floating assistant. */
+
+/* The brand typefaces, from the brand tokens's typeface collection: Primary
+   Figtree (Regular, SemiBold, Italic), Secondary DM Serif Text (Regular, Italic),
+   and JetBrains Mono for code. All three were NAMED in the tokens below but never
+   loaded — no @font-face existed anywhere — so every page has been rendering in
+   Helvetica and Georgia while claiming to be on brand.
+   Vendored as woff2 (latin, 148KB for all seven faces), because everything here is
+   served locally: a Google Fonts link would not survive an offline DDEV box and is
+   blocked outright by the artifact CSP. OFL-1.1, licences beside the files.
+   font-display: swap — text must be readable before the font arrives. */
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/vendor/fonts/figtree-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Figtree';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/vendor/fonts/figtree-latin-400-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Figtree';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/vendor/fonts/figtree-latin-600-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Figtree';
+  font-style: italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url('/vendor/fonts/figtree-latin-600-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Serif Text';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/vendor/fonts/dm-serif-text-latin-400-normal.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'DM Serif Text';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/vendor/fonts/dm-serif-text-latin-400-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('/vendor/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
+}
+/* The terminal's face: Ubuntu Mono, the one the Ubuntu terminal draws with. One variable file serves
+   regular and bold. Ubuntu Font Licence 1.0, beside the file. */
+@font-face {
+  font-family: 'Ubuntu Mono';
+  font-style: normal;
+  font-weight: 400 700;
+  font-display: swap;
+  src: url('/vendor/fonts/ubuntu-mono-latin-wght-normal.woff2') format('woff2');
+}
+
+/* UIKit, fed the Webship tokens.
+ *
+ * UIKit's own stylesheet (vendor/uikit.min.css) is untouched — these rules
+ * re-point its colours at the theme's tokens, once, so that the dark half is a
+ * different set of VALUES rather than a second set of RULES. Every declaration
+ * below reads a token; none of them names a colour. That is the whole contract:
+ * a component that says var(--surface-card) is right in any theme and in either
+ * half, and one that says a colour outright is right in exactly one.
+ *
+ * The text ladder is Webship's, darkest to quietest: --text-default for headings,
+ * --text-subtle-2 for body and controls, --text-subtle for meta. UIKit's own greys
+ * were lighter than the design system asks for, and lighter than WCAG AA wants on a
+ * tinted surface.
+ */
+
+/* The ROOT carries the page colour too, not just the body.
+ *
+ * <html> was left at the browser's white while <body> went dark, so every gap showed it: the strip
+ * under a page whose content is shorter than the window, and the overscroll bounce at the top and
+ * bottom of a long one. A white flash on a dark dashboard, from the one element nobody had painted.
+ *
+ * min-height on both, so a short page still fills the window rather than ending in a band of
+ * whatever is behind it — /products with two rows, /videos with none. */
+html { background: var(--surface); min-height: 100%; }
+html.dark { color-scheme: dark; }
+body { min-height: 100vh; }
+body.uk-background-muted { background: var(--surface) !important; color: var(--text-subtle-2); }
+
+/* Gradient headline + brand buttons */
+.hero h1 {
+  background: var(--brand-grad);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+  font-weight: 700;
+}
+
+.uk-button-primary {
+  background: var(--brand-grad);
+  border: none;
+  color: var(--text-inverse);
+}
+
+.uk-button-primary:hover { filter: brightness(1.08); background: var(--brand-grad); }
+
+.uk-button-default {
+  background: var(--surface-card);
+  color: var(--text-subtle-2);
+  border-color: var(--line-strong);
+}
+
+.uk-button-default:hover,
+.uk-button-default:focus { background: var(--surface-muted); color: var(--text-default); }
+
+.uk-button-secondary { background: var(--brand-secondary); color: var(--text-inverse); }
+
+.uk-button-danger { background: var(--danger); }
+.uk-badge, .uk-label { background: var(--chip-bg); color: var(--chip-ink); }
+
+/* Status, from the brand tokens's Alert Colors: the solid colour, its subtle tint, and the ink that reads on the
+   tint. UIKit's own green, orange and pink were none of those, and white on its green label was 2.6:1. */
+.uk-label-success { background: var(--ok); color: var(--text-inverse); }
+/* Dark text on the yellow in both halves: --warning-ink lightens after dark, for the dark tint, not for this. */
+.uk-label-warning { background: var(--warning); color: var(--brand-dark); }
+.uk-label-danger { background: var(--danger); color: var(--text-inverse); }
+.uk-text-success { color: var(--ok-ink) !important; }
+.uk-text-warning { color: var(--warning-ink) !important; }
+.uk-text-danger { color: var(--danger-text) !important; }
+.uk-text-primary { color: var(--link) !important; }
+/* UIKit colours emphasis pink; in running text emphasis is the sentence's own colour, in italics. */
+em { color: inherit; }
+.uk-alert-primary { background: var(--busy-soft); color: var(--busy-ink); }
+.uk-alert-success { background: var(--ok-soft); color: var(--ok-ink); }
+.uk-alert-warning { background: var(--warning-soft); color: var(--warning-ink); }
+.uk-alert-danger { background: var(--danger-soft); color: var(--danger-ink); }
+
+.uk-card-default {
+  background: var(--surface-card);
+  color: var(--text-subtle-2);
+  border: 1px solid var(--line);
+  box-shadow: var(--shadow-card);
+}
+
+.uk-card-hover:hover { box-shadow: var(--shadow-card-hover); border-color: var(--line-strong); }
+
+/* The classes too: UIKit colours .uk-h3 itself, and a class outranks a tag, so "Build a new project" (an h2 with
+   .uk-h3) stayed UIKit's dark grey on the dark page. */
+h1, h2, h3, h4, h5, h6, .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6, .uk-card-default .uk-card-title { color: var(--text-default); }
+.uk-text-meta, .uk-text-lead { color: var(--text-subtle) !important; }
+
+/* Form controls. The select needs UIKit's own selector — `.uk-select` alone is
+   (0,1,0) against UIKit's `.uk-select:not([multiple]):not([size])` at (0,3,0), so
+   the shorter one never won and every dropdown stayed unstyled. `background-color`,
+   not the `background` shorthand: the shorthand would drop the arrow, which UIKit
+   draws as a background-image in that same rule. */
+.uk-input, .uk-textarea {
+  background: var(--surface-input);
+  color: var(--text-subtle-2);
+  border-color: var(--line);
+}
+
+.uk-select:not([multiple]):not([size]) {
+  background-color: var(--surface-input);
+  color: var(--text-subtle-2);
+  border-color: var(--line);
+}
+
+.uk-input:focus, .uk-textarea:focus, .uk-select:focus {
+  border-color: var(--link);
+  box-shadow: 0 0 0 .1875rem var(--focus-ring);
+}
+
+.uk-input::placeholder, .uk-textarea::placeholder { color: var(--text-subtle); }
+
+a, .uk-link { color: var(--link); }
+
+/* Menus. UIKit paints a dropdown white with grey links and dark headers whatever the page is, so every row menu
+   (DDEV, GIT, COMPOSER…) stayed a white panel after dark, and its links were 2.8:1 in light. */
+.uk-dropdown { background: var(--surface-card); color: var(--text-subtle-2); border: 1px solid var(--line); box-shadow: var(--shadow-float); }
+.uk-dropdown-nav > li > a, .uk-nav-default > li > a,
+.uk-dropdown-nav .uk-nav-sub a, .uk-nav-default .uk-nav-sub a { color: var(--text-subtle-2); }
+.uk-dropdown-nav > li > a:hover, .uk-dropdown-nav > li.uk-active > a,
+.uk-nav-default > li > a:hover, .uk-nav-default > li.uk-active > a,
+.uk-dropdown-nav .uk-nav-sub a:hover, .uk-nav-default .uk-nav-sub a:hover { color: var(--link); }
+.uk-dropdown-nav .uk-nav-header, .uk-nav-default .uk-nav-header, .uk-nav-header { color: var(--text-default); }
+.uk-dropdown-nav .uk-nav-divider, .uk-nav-default .uk-nav-divider, .uk-nav-divider { border-top-color: var(--line); }
+
+/* Tab switchers (Commands → Buttons: Rows, Activity, Definition). UIKit's blue is not Webship blue, and its grey
+   tabs were 2.8:1. */
+.uk-subnav > * > :first-child { color: var(--text-subtle); }
+.uk-subnav > * > a:hover, .uk-subnav > .uk-active > a { color: var(--text-default); }
+.uk-subnav-pill > * > a:hover { background-color: var(--surface-muted); color: var(--text-default); }
+.uk-subnav-pill > .uk-active > a { background-color: var(--brand-primary); color: var(--text-inverse); }
+
+/* Code. Inline code reads as part of its sentence: a quiet tint and the accent ink, in both halves. UIKit's pink
+   on near-white was 3.2:1, and stayed a light box on the dark page. A block of code is the code surface in both
+   halves, as the terminal and the job output already are. */
+:not(pre) > code, :not(pre) > kbd, :not(pre) > samp { background: var(--surface-muted); color: var(--accent-ink); }
+pre { background: var(--code-bg); color: var(--code-ink); border-color: var(--line); }
+pre code { color: inherit; }
+
+footer.uk-section, footer.uk-section a { color: var(--text-subtle); }
+
+
+/* ---------- Keyboard focus, everywhere ----------
+ *
+ * There was no global focus style, so most of the interface fell back to the browser's own — a 2px
+ * DOTTED outline in near-black, which on a dark page over a dark panel is all but invisible, and on a
+ * light one is a 1996 dotted box. A keyboard user could not see where they were.
+ *
+ * :focus-visible, not :focus, so a mouse click does not draw a ring the pointer user did not ask for.
+ * The tokens do the theming, so both halves follow with no second copy of the rule. */
+:where(a, button, [role="button"], input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
+  outline: 2px solid var(--brand-primary);
+  outline-offset: 2px;
+  border-radius: 0.25rem;
+}
+
+/* On a brand-coloured surface the brand ring disappears into it; light is what reads there. */
+.assistant-head :where(a, button):focus-visible,
+.uk-button-primary:focus-visible,
+.uk-button-secondary:focus-visible,
+.uk-button-danger:focus-visible {
+  outline-color: var(--text-inverse);
+  outline-offset: 1px;
+}
+
+/* A link inside a block of text has to be told apart from that text by something other than colour
+   (WCAG 1.4.1): brand blue against the meta grey is 1.08:1 to a colour-blind reader and on a printout.
+   Scoped to prose — paragraphs, list items and the meta lines — so the buttons, the project rows and
+   the rails, where a link is already a shape, are left alone. */
+p a:not(.uk-button):not(.uk-link-reset),
+li a:not(.uk-button):not(.uk-link-reset),
+.uk-text-meta a:not(.uk-button):not(.uk-link-reset) {
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+/* UIKit paints a link inside .uk-text-meta the same grey as the meta text — 2.84:1 on white,
+   and indistinguishable from the words around it. The link token is the readable one; the extra
+   :not() is what outranks UIKit's own two-class rule without touching the vendored file. */
+.uk-text-meta a:not(.uk-button):not(.uk-link-reset) { color: var(--link); }

package/public/css/components/ai-assistant.css

@@ -0,0 +1,263 @@
+/* ---------- AI Assistant ---------- */
+
+.assistant-panel {
+  border-radius:0.75rem;
+  overflow: hidden;
+  box-shadow: 0 8px 28px rgba(30, 135, 240, .12);
+}
+
+.assistant-head {
+  background: var(--brand-grad);
+  color: var(--text-inverse);
+  padding:1rem 1.25rem;
+}
+
+.assistant-head-row { gap:0.75rem; }
+
+.assistant-avatar {
+  width:2.875rem;
+  height:2.875rem;
+  min-width:2.875rem;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, .2);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size:1.5rem;
+}
+
+.assistant-head-text { flex: 1; min-width: 0; }
+.assistant-head-text h3 { color: var(--text-inverse); font-size:1.0625rem; line-height: 1.2; }
+.assistant-head-text .uk-text-small { color: rgba(255, 255, 255, .8); }
+
+.assistant-badge {
+  background: rgba(255, 255, 255, .22);
+  color: var(--text-inverse);
+  border-radius:62.4375rem;
+  white-space: nowrap;
+}
+
+.assistant-body { padding:1.125rem 1.25rem 1.25rem; }
+
+/* Chat log */
+
+.chat-log {
+  background: var(--subtle-light);
+  border: 1px solid var(--line);
+  border-radius:0.75rem;
+  padding:0.875rem;
+  min-height:13.75rem;
+  max-height:clamp(15rem, 42vh, 26.25rem);
+  overflow-y: auto;
+  font-size:0.875rem;
+  line-height: 1.5;
+}
+
+.chat-log .msg {
+  position: relative;
+  margin-bottom:0.875rem;
+  max-width: 88%;
+}
+
+.chat-log .msg:last-child { margin-bottom: 0; }
+.chat-log .msg p { margin:0.25rem 0; }
+
+.chat-log .msg.assistant,
+.chat-log .msg.error {
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  border-radius:0.25rem 0.875rem 0.875rem 0.875rem;
+  padding:0.625rem 0.875rem 0.625rem 0.875rem;
+  margin-left:2.125rem;
+  box-shadow: 0 2px 6px rgba(20, 30, 60, .05);
+}
+
+.chat-log .msg.assistant::before,
+.chat-log .msg.error::before {
+  content: '';
+  position: absolute;
+  left:-2.125rem;
+  top: 0;
+  width:1.625rem;
+  height:1.625rem;
+  border-radius: 50%;
+  background: var(--brand-grad);
+  background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='white'%3E%3Cpath%20d='M10.5%202l1.9%206.1%206.1%201.9-6.1%201.9-1.9%206.1-1.9-6.1L2.5%2010l6.1-1.9L10.5%202z'/%3E%3Cpath%20d='M18.5%2013.5l1%203%203%201-3%201-1%203-1-3-3-1%203-1%201-3z'/%3E%3C/svg%3E"), var(--brand-grad);
+  background-size: 15px 15px, cover;
+  background-position: center, center;
+  background-repeat: no-repeat;
+}
+
+.chat-log .msg.user {
+  background: var(--brand-grad);
+  color: var(--text-inverse);
+  border-radius:0.875rem 0.25rem 0.875rem 0.875rem;
+  padding:0.625rem 0.875rem;
+  margin-left: auto;
+  margin-right:2.125rem;
+  box-shadow: 0 3px 10px rgba(30, 135, 240, .25);
+}
+
+.chat-log .msg.user::after {
+  content: '👤';
+  position: absolute;
+  right:-2.125rem;
+  top: 0;
+  width:1.625rem;
+  height:1.625rem;
+  border-radius: 50%;
+  background: var(--line);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size:0.875rem;
+}
+
+.chat-log .msg.error {
+  border-color: var(--danger);
+  color: var(--danger-ink);
+}
+
+#webship-workspace-output .msg.error {
+  background: var(--danger-soft);
+  border: 1px solid var(--danger);
+  color: var(--danger-ink);
+  border-radius:0.375rem;
+  padding:0.5rem 0.75rem;
+  margin-top:1rem;
+}
+
+#webship-workspace-output .msg.assistant {
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  border-radius:0.375rem;
+  padding:0.75rem;
+  margin-top:1rem;
+}
+
+.chat-log pre,
+#webship-workspace-output pre {
+  background: var(--code-bg);
+  color: var(--code-ink);
+  padding:0.625rem;
+  border-radius:0.5rem;
+  overflow-x: auto;
+  font-size:0.75rem;
+  max-height:16.25rem;
+  margin:0.5rem 0 0;
+}
+
+/* Chat input */
+
+/* A composer box, not a one-line field: the prompt sits in a bordered card
+   with the text on its own row and the controls on a toolbar underneath —
+   the shape Drupal CMS uses for its AI prompt. */
+.chat-input {
+  display: flex;
+  flex-direction: column;
+  gap:0.5rem;
+  margin-top:0.875rem;
+  padding:0.625rem 0.75rem;
+  background: var(--surface-card);
+  border: 1px solid var(--line);
+  border-radius:0.875rem;
+  box-shadow: 0 1px 2px rgba(43, 68, 124, .06);
+  transition: border-color .15s ease, box-shadow .15s ease;
+}
+
+.chat-input:focus-within {
+  border-color: var(--brand-primary);
+  box-shadow: 0 0 0 3px var(--subtle-brand);
+}
+
+/* UIKit pins .uk-input to a 40px height, so the composer overrides height
+   itself — min-height alone loses to it. */
+.chat-input .uk-input {
+  border: 0;
+  background: transparent;
+  border-radius: 0;
+  box-shadow: none;
+  flex: 1;
+  min-width: 0;
+  height: auto;
+  min-height:4.75rem;
+  padding:0.375rem 0.125rem;
+  font-size:0.9375rem;
+  line-height: 1.5;
+}
+
+.chat-input .uk-input:focus { border: 0; box-shadow: none; background: transparent; }
+
+.chat-input .chat-tools {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap:0.5rem;
+}
+
+
+.chat-input .mic-btn,
+.chat-input .send-btn {
+  border-radius:31.25rem;
+  display: inline-flex;
+  align-items: center;
+  gap:0.25rem;
+  padding:0 0.875rem;
+}
+
+/* Responsive: stack quick actions, icon-only buttons on narrow screens */
+
+@media (max-width: 40em) {
+  .assistant-body { padding:0.875rem; }
+  .assistant-head { padding:0.75rem 0.875rem; }
+  .chat-log .msg { max-width: 100%; }
+  .send-btn .qa-label { display: none; }
+  .assistant-badge .uk-label-text { display: none; }
+}
+
+/* Until ui.js moves the prompt-mode select into deep-chat's toolbar, it lives in
+   its own row above the composer — visible and usable, never missing. */
+.assistant-body > .chat-tools { display: flex; margin-bottom: .5rem; }
+.assistant-body > .chat-tools .command-picker { width: 100%; }
+
+/* "New chat" in the panel header. Labelled rather than an icon alone — a bare glyph in a chat
+   header could as easily mean reload or retry, and this one ends the conversation.
+
+   It sits ON the brand gradient, so it cannot be a default button: that one is a light outline with
+   dark ink, which put near-black text on a blue gradient (2.06:1 against the light end of it, 1.00:1
+   against the dark end — invisible). White ink on a hairline of white, no fill, is legible over both
+   ends: 4.59:1 on brand/primary and 9.46:1 on brand/secondary (measured).
+
+   The selector has to out-specify UIKit's own .uk-button-default. A single class ties with it, and
+   uikit.min.css is linked after the assembled stylesheet, so the tie went to UIKit and none of this
+   applied — which is exactly what the black label was. Never fork the vendored CSS; win on
+   specificity instead. The hover fill is black rather than white for the same reason as the ink:
+   lightening the ground under white text is what would take the contrast back down. */
+.assistant-head-row { gap: 0.5rem; }
+.assistant-head-text { flex: 1; min-width: 0; }
+
+.assistant-head .uk-button.assistant-new {
+  flex: none;
+  white-space: nowrap;
+  padding: 0 0.7rem;
+  line-height: 1.75rem;
+  font-size: 0.8125rem;
+  color: var(--text-inverse);
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, .55);
+  border-radius: 62.4375rem;
+  box-shadow: none;
+}
+
+.assistant-head .uk-button.assistant-new:hover,
+.assistant-head .uk-button.assistant-new:focus {
+  color: var(--text-inverse);
+  background: rgba(0, 0, 0, .18);
+  border-color: rgba(255, 255, 255, .85);
+}
+
+/* The page's focus ring is a brand blue, which disappears into the gradient. */
+.assistant-head .uk-button.assistant-new:focus-visible {
+  outline: 2px solid rgba(255, 255, 255, .9);
+  outline-offset: 2px;
+}