@korso/shepherd-ui 0.3.1 → 0.4.0

package/dist/lib/selfhost.js

@@ -1,6 +1,6 @@
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import { useState as s, useMemo as h } from "react";
-import { c as d, a as m, D as u } from "./Dashboard-Bgi50wCo.js";
+import { c as d, a as m, D as u } from "./Dashboard-CTXdGRxM.js";
 const i = "shepherd.token";
 function p() {
   try {

package/dist/lib/styles.css

@@ -46,6 +46,56 @@
         background:transparent; cursor:pointer; font:inherit; }
       .tab--active { background:var(--ink); color:var(--bg); }
 
+      /* Workspace switcher (app-bar): the active-workspace indicator + the one
+         home for switch/create/join. Shown on every tab. */
+      .ws-switcher { position:relative; }
+      .ws-trig { display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:13px;
+        font-weight:600; color:var(--ink); cursor:pointer;
+        border:1px solid var(--line); border-radius:9px; padding:5px 10px; background:var(--card); }
+      .ws-trig:hover { border-color:var(--ink3); }
+      .ws-trig--empty { background:transparent; border-style:dashed; border-color:var(--ink2); }
+      .ws-avatar { width:18px; height:18px; border-radius:6px; background:var(--ink); color:var(--bg);
+        display:grid; place-items:center; font-size:10px; font-weight:700; flex:none; }
+      .ws-avatar--sm { width:16px; height:16px; font-size:9px; }
+      .ws-plus { color:var(--ink2); font-weight:700; }
+      .ws-name { max-width:180px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+      .ws-caret { color:var(--ink3); font-size:10px; }
+
+      .ws-menu { position:absolute; top:40px; left:0; width:240px; z-index:20;
+        background:var(--card); border:1px solid var(--line); border-radius:11px; padding:6px;
+        box-shadow:0 8px 24px rgba(50,40,20,.16); }
+      .ws-menu__head { margin:0; padding:6px 8px; font-size:10px; letter-spacing:.08em;
+        text-transform:uppercase; color:var(--ink3); }
+      .ws-menu__none { margin:0; padding:2px 8px 6px; color:var(--ink3); font-style:italic; font-size:13px; }
+      .ws-menu__list { list-style:none; margin:0; padding:0; }
+      .ws-mi { display:flex; align-items:center; gap:8px; width:100%; text-align:left; font:inherit;
+        font-size:13px; color:var(--ink); background:transparent; border:0; border-radius:7px;
+        padding:7px 8px; cursor:pointer; }
+      .ws-mi:hover { background:var(--chip); }
+      .ws-mi--on { font-weight:600; }
+      .ws-mi__name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
+      .ws-mi__check { color:var(--live); }
+      .ws-menu__actions { display:flex; flex-direction:column; margin-top:5px; padding-top:5px;
+        border-top:1px solid var(--line2); }
+      .ws-action { display:flex; align-items:center; gap:8px; width:100%; text-align:left; font:inherit;
+        font-size:13px; color:var(--ink2); background:transparent; border:0; border-radius:7px;
+        padding:8px; cursor:pointer; }
+      .ws-action:hover { background:var(--chip); color:var(--ink); }
+
+      .ws-form { display:flex; flex-direction:column; gap:8px; padding:4px; }
+      .ws-form label { font-size:10px; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
+        color:var(--ink3); }
+      .ws-form input { padding:8px 10px; border-radius:8px; border:1px solid var(--line);
+        background:var(--bg); color:var(--ink); font:inherit; }
+      .ws-form input:focus { outline:none; border-color:var(--terr); box-shadow:0 0 0 3px rgba(122,106,72,.14); }
+      .ws-form__row { display:flex; gap:8px; justify-content:flex-end; }
+      .ws-form__row button { font:inherit; font-size:13px; font-weight:600; border-radius:8px;
+        padding:7px 14px; cursor:pointer; border:1px solid var(--ink); background:var(--ink); color:var(--bg); }
+      .ws-form__row button:disabled { opacity:.55; cursor:default; }
+      .ws-form__back { background:transparent !important; color:var(--ink2) !important;
+        border-color:var(--line) !important; }
+      .ws-menu__error { margin:6px 4px 2px; font-size:12.5px; color:var(--drop); }
+
       /* Crew strip */
       .crew { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin:26px 0 32px; }
       .person { display:inline-flex; align-items:center; gap:9px; padding:5px 13px 5px 5px;
@@ -187,11 +237,40 @@
       .shepherd-config { display:flex; flex-direction:column; }
       .shepherd-config h2 { font-size:16px; margin:0 0 22px; }
 
-      /* Flat sections: no card chrome. Each section sits directly on the page;
-         consecutive sections are set off by a hairline rather than a box. */
-      .shepherd-config > section { padding:26px 0; }
-      .shepherd-config > section:first-of-type { padding-top:0; }
-      .shepherd-config > section + section { border-top:1px solid var(--line2); }
+      /* Config sidebar: a left nav of sections beside the active section's
+         panel, replacing the old single long scroll. */
+      .config-layout { display:flex; gap:32px; align-items:flex-start; }
+      .config-nav { flex:none; width:170px; display:flex; flex-direction:column; gap:2px;
+        position:sticky; top:0; }
+      /* Scoped under .shepherd-config to out-specify the generic dark-fill
+         `.shepherd-config button` rule — these are plain nav links, not buttons. */
+      .shepherd-config .config-nav__item { text-align:left; font:inherit; font-size:13.5px;
+        color:var(--ink2); background:transparent; border:0; border-radius:8px; padding:8px 12px;
+        cursor:pointer; box-shadow:inset 2px 0 0 transparent; transition:color .12s ease, background .12s ease; }
+      /* Extra .config-nav in the chain so this out-specifies the generic dark
+         `.shepherd-config button:hover` fill — a translucent tint, not a block. */
+      .shepherd-config .config-nav .config-nav__item:hover { color:var(--ink);
+        background:rgba(50,44,32,.06); }
+      .shepherd-config .config-nav__item--on { color:var(--ink); font-weight:600;
+        box-shadow:inset 2px 0 0 var(--ink); }
+      .shepherd-config .config-nav .config-nav__item--on:hover { background:transparent; }
+      .config-panel { flex:1; min-width:0; }
+
+      /* Two sections can share a panel (Members + Invites); set them off by a
+         hairline, mirroring the old flat-section separation. */
+      .config-panel > section + section { margin-top:26px; padding-top:26px;
+        border-top:1px solid var(--line2); }
+
+      /* No-workspace Config prompt (create/join now live in the switcher). */
+      .config-none { color:var(--ink2); font-size:13.5px; max-width:520px; }
+
+      /* Read-only workspace facts (name / role) in General. */
+      .shepherd-config .readonly-value { margin:0; font-size:14px; color:var(--ink);
+        padding:9px 12px; border-radius:8px; border:1px solid var(--line2); background:var(--bg); }
+      .shepherd-general .leave { padding-top:4px; }
+      .shepherd-config button.danger { border-color:var(--drop); background:transparent; color:var(--drop);
+        align-self:flex-start; }
+      .shepherd-config button.danger:hover:not(:disabled) { background:var(--drop); color:var(--bg); }
       .shepherd-config .card-head h3 {
         font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
         color:var(--ink2); margin:0; }
@@ -215,10 +294,10 @@
       .shepherd-config .field__row { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
       .shepherd-config .field__row > input { flex:1; min-width:200px; }
 
-      /* Admin zone (invites) is set off from create/join by a hairline. */
-      .shepherd-workspaces .admin { display:flex; flex-direction:column; gap:14px;
-        padding-top:16px; border-top:1px solid var(--line2); }
-      .shepherd-workspaces .invites { display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
+      /* Invite-by-code: a compact button with the freshly-created code shown
+         above it (the button below mints another). */
+      .shepherd-invites .invites { gap:12px; }
+      .shepherd-invites .invites > button { align-self:flex-start; }
 
       .shepherd-config input, .shepherd-config select {
         padding:9px 12px; border-radius:8px; border:1px solid var(--line);
@@ -252,21 +331,52 @@
         border:1px solid var(--line); background:var(--bg); color:var(--ink);
         font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px; line-height:1.5;
         overflow-x:auto; white-space:pre-wrap; word-break:break-word; }
-      .shepherd-connect-agent .install-command__copy {
-        position:absolute; top:8px; right:8px; padding:4px 10px; font-size:11px;
-        border-radius:6px; border:1px solid var(--line); background:var(--card);
-        color:var(--ink2); cursor:pointer; transition:background .12s ease, color .12s ease; }
-      .shepherd-connect-agent .install-command__copy:hover { background:var(--ink); color:var(--bg); }
+      /* Bare icon button (clipboard → check on copy), not a filled pill. Extra
+         selector depth beats the generic dark `.shepherd-config button` fill. */
+      .shepherd-config .shepherd-connect-agent .install-command__copy {
+        position:absolute; top:7px; right:7px; display:grid; place-items:center;
+        width:28px; height:28px; padding:0; border-radius:7px; border:0;
+        background:transparent; color:var(--ink3); cursor:pointer;
+        transition:background .12s ease, color .12s ease; }
+      .shepherd-config .shepherd-connect-agent .install-command__copy:hover {
+        background:rgba(50,44,32,.08); color:var(--ink); }
       .shepherd-connect-agent h4 { margin:6px 0 0; font-size:11px; font-weight:600;
         letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); }
 
-      .shepherd-config .invite-result, .shepherd-connect-agent .token-once {
+      .shepherd-connect-agent .token-once {
         font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
         padding:10px 12px; border-radius:8px;
         background:var(--chip); border:1px solid var(--line2); }
-      .shepherd-config .invite-result { display:flex; flex-direction:column; gap:8px; word-break:break-all; }
-      .shepherd-config .invite-result__row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
-      .shepherd-config .invite-result a { color:var(--ink2); }
+
+      /* Created-invite card: an eyebrow + use count + a quiet Revoke, then the
+         code and join link each with their own Copy affordance. */
+      .shepherd-config .invite-result { align-self:stretch; display:flex; flex-direction:column;
+        gap:12px; padding:14px 16px; border-radius:10px; background:var(--card);
+        border:1px solid var(--line); }
+      .shepherd-config .invite-result__head { display:flex; align-items:center; gap:12px; }
+      .shepherd-config .invite-result__eyebrow { flex:1; font-size:11px; font-weight:600;
+        letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); }
+      .shepherd-config .invite-uses { font-size:12px; color:var(--ink3); }
+      .shepherd-config .invite-result__copyrow { display:flex; align-items:center; gap:10px; }
+      .shepherd-config .invite-result__copyrow > code { flex:1; min-width:0; font-size:15px;
+        font-weight:600; font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
+        color:var(--ink); letter-spacing:.02em; word-break:break-all; }
+      .shepherd-config .invite-result__copyrow--link { padding-top:10px;
+        border-top:1px solid var(--line2); }
+      .shepherd-config .invite-result__copyrow--link a { flex:1; min-width:0; font-size:12px;
+        color:var(--ink2); word-break:break-all; }
+
+      /* Quiet buttons inside the card: a bordered Copy pill and a text-only
+         Revoke. Extra selector depth beats the generic dark `button` fill+hover. */
+      .shepherd-config .invite-result .copy-btn { flex:none; padding:5px 12px; font-size:12px;
+        font-weight:600; border-radius:7px; border:1px solid var(--line); background:var(--bg);
+        color:var(--ink2); cursor:pointer; }
+      .shepherd-config .invite-result .copy-btn:hover { background:var(--ink); color:var(--bg);
+        border-color:var(--ink); }
+      .shepherd-config .invite-result .link-btn { flex:none; padding:0; font-size:12px;
+        font-weight:600; border:0; background:transparent; color:var(--drop); cursor:pointer; }
+      .shepherd-config .invite-result .link-btn:hover { background:transparent;
+        text-decoration:underline; }
       .shepherd-config .revoked { color:var(--ink3); text-decoration:line-through; }
       .shepherd-empty-state { text-align:center; color:var(--ink2); padding:48px 24px; }
       .shepherd-empty-state button { margin-top:14px; }

package/dist/preview.js

@@ -41,11 +41,26 @@ let tokens = [
 ];
 let nextTokenId = 3;
 let lastInvite = null;
-const workspace = { id: "ws_preview", slug: "acme", name: "Acme Engineering", role: "admin" };
+// A small mutable list so the app-bar workspace switcher (switch / create /
+// join) can be clicked through — create/join append here, listWorkspaces reads it.
+let workspaces = [
+    { id: "ws_preview", slug: "poop", name: "Poop on a stick", role: "admin" },
+    { id: "ws_acme", slug: "acme", name: "Acme Engineering", role: "member" },
+];
+let nextWsId = 1;
 const previewClient = {
     baseUrl: "https://shepherd-hub-preview.a.run.app",
-    listWorkspaces: async () => ({ workspaces: [workspace] }),
-    createWorkspace: async (_body) => workspace,
+    listWorkspaces: async () => ({ workspaces }),
+    createWorkspace: async (body) => {
+        const ws = {
+            id: `ws_new_${nextWsId++}`,
+            slug: "new",
+            name: body.name,
+            role: "admin",
+        };
+        workspaces = [...workspaces, ws];
+        return ws;
+    },
     mintToken: async (_workspaceId, body) => {
         const id = `tok_${nextTokenId++}`;
         tokens = [
@@ -74,7 +89,16 @@ const previewClient = {
     revokeInvite: async () => {
         lastInvite = null;
     },
-    redeemInvite: async () => ({ workspace }),
+    redeemInvite: async () => {
+        const joined = {
+            id: `ws_joined_${nextWsId++}`,
+            slug: "joined",
+            name: "Joined workspace",
+            role: "member",
+        };
+        workspaces = [...workspaces, joined];
+        return { workspace: joined };
+    },
     listMembers: async () => ({ members }),
     removeMember: async (_workspaceId, accountId) => {
         members = members.filter((m) => m.accountId !== accountId);