@korso/shepherd-ui 0.2.1 → 0.3.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-B7nioe5N.js";
+import { c as d, a as m, D as u } from "./Dashboard-Bgi50wCo.js";
 const i = "shepherd.token";
 function p() {
   try {

package/dist/lib/styles.css

@@ -12,9 +12,7 @@
       }
       .wrap { max-width:1100px; margin:0 auto; padding:40px 44px; }
 
-      header { display:flex; align-items:center; gap:12px; padding-bottom:18px; border-bottom:1px solid var(--line); }
-      /* Chat view: the card supplies its own border, so the header rule is redundant. */
-      #board:has(#panel-chat:not([hidden])) header { border-bottom:0; }
+      header { display:flex; align-items:center; gap:12px; padding-bottom:18px; }
       .brand { font-size:17px; font-weight:600; }
       .vitals { color:var(--ink3); font-size:12.5px; }
       .grow { flex:1; }
@@ -181,37 +179,130 @@
       .gate button { padding:10px 16px; border-radius:8px; border:1px solid var(--ink);
         background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer; }
 
-      /* --- Multi-workspace hosted shell + config surface (functional, not polished;
-         a dedicated styling sub-project refines this). Reuses the board's tokens. --- */
+      /* --- Multi-workspace hosted shell + config surface. Reuses the board's
+         tokens and its editorial vocabulary (uppercase micro-labels echoing the
+         column heads, hairline rules) so Config reads as part of the board. --- */
       .shepherd-root { max-width:1100px; margin:0 auto; padding:40px 44px; }
       .shepherd-root > main { padding-top:18px; }
-      .shepherd-config { display:flex; flex-direction:column; gap:24px; }
-      .shepherd-config h2 { font-size:16px; margin:0 0 4px; }
-      .shepherd-workspaces, .shepherd-members, .shepherd-connect-agent {
-        display:flex; flex-direction:column; gap:10px;
-        padding:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); }
-      .shepherd-workspaces .switcher { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
-      .shepherd-workspaces .role { color:var(--ink3); font-size:12px; }
-      .shepherd-workspaces .admin, .shepherd-workspaces .invites { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
-      /* Create-workspace + join-by-code rows: label, input, then action button on
-         one line. A fixed-width label column aligns the two rows' inputs vertically. */
-      .shepherd-workspaces .create, .shepherd-workspaces .join {
-        display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
-      .shepherd-workspaces .create > label, .shepherd-workspaces .join > label,
-      .shepherd-workspaces .switcher > label { min-width:104px; color:var(--ink2); }
-      .shepherd-workspaces .create > input, .shepherd-workspaces .join > input {
-        flex:1; min-width:180px; }
+      .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); }
+      .shepherd-config .card-head h3 {
+        font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
+        color:var(--ink2); margin:0; }
+      .shepherd-config .card-sub { margin:4px 0 0; font-size:12.5px; color:var(--ink3); }
+      .shepherd-config .card-head { margin-bottom:16px; }
+      .shepherd-config .card-body { display:flex; flex-direction:column; gap:16px; }
+      .shepherd-config .card-body > [role="alert"] { margin:0; color:var(--drop); font-size:13px; }
+      .shepherd-config .card-body > [role="status"] { margin:0; color:var(--ink2); font-size:13px; }
+
+      /* A field: uppercase eyebrow label, optional helper, then input(s) + action
+         on one row. Labels borrow the board's .colhead h2 treatment. */
+      .shepherd-config .field { display:flex; flex-direction:column; gap:8px; }
+      .shepherd-config .card-body label {
+        font-size:11px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--ink3); }
+      .shepherd-config .helper { margin:0; font-size:12.5px; color:var(--ink2); }
+      .shepherd-config .field > select { width:100%; }
+      .shepherd-config select {
+        appearance:none; -webkit-appearance:none; -moz-appearance:none;
+        background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%239c917a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+        background-repeat:no-repeat; background-position:right 28px center; padding-right:44px; }
+      .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; }
+
       .shepherd-config input, .shepherd-config select {
-        padding:8px 10px; border-radius:8px; border:1px solid var(--line);
-        background:var(--bg); color:var(--ink); }
+        padding:9px 12px; border-radius:8px; border:1px solid var(--line);
+        background:var(--bg); color:var(--ink); font:inherit;
+        transition:border-color .12s ease, box-shadow .12s ease; }
+      .shepherd-config input::placeholder { color:var(--ink3); }
+      .shepherd-config input:focus, .shepherd-config select:focus {
+        outline:none; border-color:var(--terr); box-shadow:0 0 0 3px rgba(122,106,72,.14); }
       .shepherd-config button {
-        padding:8px 14px; border-radius:8px; border:1px solid var(--ink);
-        background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer; }
+        padding:9px 16px; border-radius:8px; border:1px solid var(--ink);
+        background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer; font:inherit;
+        white-space:nowrap; transition:background .12s ease; }
+      .shepherd-config button:hover:not(:disabled) { background:#413a2a; }
       .shepherd-config button:disabled { opacity:.55; cursor:default; }
+
+      /* Token / member rows: leading name grows, meta + action ride the right.
+         Flat rows separated by hairlines (mirrors the board's .claim rows)
+         rather than individually boxed items. */
+      .shepherd-config ul { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
+      .shepherd-config li { display:flex; align-items:center; gap:10px; padding:10px 0; font-size:13px; }
+      .shepherd-config li + li { border-top:1px solid var(--line2); }
+      .shepherd-config li > span:first-child { flex:1; min-width:0; font-weight:500; }
+      .shepherd-config li button { padding:5px 12px; }
+      .shepherd-config .role { color:var(--ink3); font-size:12px; }
+      .shepherd-config .token-meta { color:var(--ink3); font-size:12px; }
+      .shepherd-config .email-invite__status { margin:0; font-size:12.5px; color:var(--ink2); }
+
+      /* Install command block. */
+      .shepherd-connect-agent .install-command { position:relative; }
+      .shepherd-connect-agent pre { margin:0; padding:12px 14px; border-radius:8px;
+        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); }
+      .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 {
         font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px;
-        word-break:break-all; padding:8px 10px; border-radius:8px;
+        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); }
       .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; }
+
+      /* Feedback widget: fixed bottom-right, floats over every tab. */
+      .shepherd-feedback { position:fixed; right:20px; bottom:20px; z-index:10; }
+      .shepherd-feedback__trigger {
+        padding:9px 16px; border-radius:999px; border:1px solid var(--ink);
+        background:var(--ink); color:var(--bg); font-weight:600; font-size:13px; font:inherit;
+        cursor:pointer; box-shadow:0 8px 24px rgba(50,40,20,.18); }
+      .shepherd-feedback__trigger:hover { background:#413a2a; }
+      .shepherd-feedback__panel {
+        position:absolute; right:0; bottom:calc(100% + 10px); width:280px;
+        display:flex; flex-direction:column; gap:10px; padding:16px;
+        background:var(--card); border:1px solid var(--line); border-radius:12px;
+        box-shadow:0 8px 24px rgba(50,40,20,.18); }
+      .shepherd-feedback__panel h3 {
+        margin:0; font-size:13px; font-weight:600; letter-spacing:.04em;
+        text-transform:uppercase; color:var(--ink2); }
+      .shepherd-feedback__panel [role="status"] { margin:0; font-size:13px; color:var(--ink2); }
+      .shepherd-feedback__panel [role="alert"] { margin:0; font-size:13px; color:var(--drop); }
+      .shepherd-feedback__types { display:flex; gap:6px; }
+      .shepherd-feedback__types button {
+        flex:1; padding:6px 0; border-radius:8px; border:1px solid var(--line);
+        background:transparent; color:var(--ink2); font-size:12.5px; font:inherit;
+        cursor:pointer; transition:background .12s ease, color .12s ease; }
+      .shepherd-feedback__types button[aria-pressed="true"] {
+        background:var(--ink); color:var(--bg); border-color:var(--ink); font-weight:600; }
+      .shepherd-feedback__panel textarea {
+        min-height:80px; padding:9px 12px; border-radius:8px; border:1px solid var(--line);
+        background:var(--bg); color:var(--ink); font:inherit; resize:vertical; }
+      .shepherd-feedback__panel textarea::placeholder { color:var(--ink3); }
+      .shepherd-feedback__panel textarea:focus {
+        outline:none; border-color:var(--terr); box-shadow:0 0 0 3px rgba(122,106,72,.14); }
+      .shepherd-feedback__panel > button {
+        padding:9px 16px; border-radius:8px; border:1px solid var(--ink);
+        background:var(--ink); color:var(--bg); font-weight:600; cursor:pointer; font:inherit; }
+      .shepherd-feedback__panel > button:hover:not(:disabled) { background:#413a2a; }
+      .shepherd-feedback__panel > button:disabled { opacity:.55; cursor:default; }

package/dist/preview.d.ts

@@ -0,0 +1 @@
+import "./styles.css";

package/dist/preview.js

@@ -0,0 +1,89 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./styles.css";
+import { ShepherdClientProvider } from "./context.js";
+import { ShepherdRoot } from "./ShepherdRoot.js";
+// ---------------------------------------------------------------------------
+// Dev-only visual preview of the Config surface. NOT part of the published
+// library or the self-host build (vite.config.app.ts's build:app only bundles
+// index.html) — `npm run dev` serves this alongside it at /preview.html. Backs
+// every ShepherdClient method with in-memory state instead of a real Hub, so
+// the redesign can be clicked through without Postgres or a minted token.
+// ---------------------------------------------------------------------------
+const EMPTY_LANDSCAPE = {
+    agents: [],
+    tasks: [],
+    announcements: [],
+    serverTime: new Date().toISOString(),
+};
+const EMPTY_ANNOUNCE = { ok: true, announcementIds: [] };
+let members = [
+    { accountId: "acc_admin", displayName: "Korso Admin", githubLogin: "korso-admin", avatarUrl: null, role: "admin" },
+    { accountId: "acc_1", displayName: "Alex Rivera", githubLogin: "arivera", avatarUrl: null, role: "member" },
+    { accountId: "acc_2", displayName: "Sam Okafor", githubLogin: "sokafor", avatarUrl: null, role: "member" },
+];
+let tokens = [
+    {
+        id: "tok_1",
+        name: "laptop",
+        createdAt: "2026-06-01T00:00:00.000Z",
+        lastUsedAt: "2026-06-29T10:00:00.000Z",
+        revokedAt: null,
+    },
+    {
+        id: "tok_2",
+        name: null,
+        createdAt: "2026-06-20T00:00:00.000Z",
+        lastUsedAt: null,
+        revokedAt: null,
+    },
+];
+let nextTokenId = 3;
+let lastInvite = null;
+const workspace = { id: "ws_preview", slug: "acme", name: "Acme Engineering", role: "admin" };
+const previewClient = {
+    baseUrl: "https://shepherd-hub-preview.a.run.app",
+    listWorkspaces: async () => ({ workspaces: [workspace] }),
+    createWorkspace: async (_body) => workspace,
+    mintToken: async (_workspaceId, body) => {
+        const id = `tok_${nextTokenId++}`;
+        tokens = [
+            ...tokens,
+            { id, name: body.name ?? null, createdAt: new Date().toISOString(), lastUsedAt: null, revokedAt: null },
+        ];
+        return { token: `shp_previewtoken${id}`, id };
+    },
+    listTokens: async () => ({ tokens }),
+    revokeToken: async (_workspaceId, tokenId) => {
+        tokens = tokens.map((t) => (t.id === tokenId ? { ...t, revokedAt: new Date().toISOString() } : t));
+    },
+    createInvite: async (_workspaceId, body) => {
+        lastInvite = {
+            code: "PREVIEW-CODE",
+            expiresAt: null,
+            maxUses: body.maxUses ?? null,
+            useCount: 0,
+        };
+        return lastInvite;
+    },
+    inviteByEmail: async (_workspaceId, email) => ({
+        email,
+        sentAt: new Date().toISOString(),
+    }),
+    revokeInvite: async () => {
+        lastInvite = null;
+    },
+    redeemInvite: async () => ({ workspace }),
+    listMembers: async () => ({ members }),
+    removeMember: async (_workspaceId, accountId) => {
+        members = members.filter((m) => m.accountId !== accountId);
+    },
+    leave: async () => { },
+    landscape: async () => EMPTY_LANDSCAPE,
+    announceTo: async (_workspaceId, _body) => EMPTY_ANNOUNCE,
+    getLandscape: async () => EMPTY_LANDSCAPE,
+    announce: async (_body) => EMPTY_ANNOUNCE,
+    submitFeedback: async () => ({ ok: true, id: "fb_preview" }),
+};
+createRoot(document.getElementById("root")).render(_jsx(StrictMode, { children: _jsx(ShepherdClientProvider, { client: previewClient, children: _jsx(ShepherdRoot, { hubUrl: "https://shepherd-hub-preview.a.run.app" }) }) }));