@fungi.computer/caps 0.7.1 → 0.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fungi.computer/caps",
-  "version": "0.7.1",
+  "version": "0.9.0",
   "author": "Levi <levi@technomancy.dev>",
   "description": "Product-neutral React primitives and blocks for Fungi interfaces",
   "type": "module",
@@ -242,6 +242,10 @@
       "types": "./dist/components/alert.d.ts",
       "import": "./dist/components/alert.js"
     },
+    "./components/failure-line": {
+      "types": "./dist/components/failure-line.d.ts",
+      "import": "./dist/components/failure-line.js"
+    },
     "./components/status": {
       "types": "./dist/components/status.d.ts",
       "import": "./dist/components/status.js"
@@ -338,6 +342,10 @@
       "types": "./dist/blocks/async-state.d.ts",
       "import": "./dist/blocks/async-state.js"
     },
+    "./blocks/setup-notice": {
+      "types": "./dist/blocks/setup-notice.d.ts",
+      "import": "./dist/blocks/setup-notice.js"
+    },
     "./blocks/loading-state": {
       "types": "./dist/blocks/loading-state.d.ts",
       "import": "./dist/blocks/loading-state.js"
@@ -465,7 +473,8 @@
     "src/fonts-display.css",
     "src/fonts-mono.css",
     "src/status-tray.css",
-    "src/app-status-bar.css"
+    "src/app-status-bar.css",
+    "src/first-run.css"
   ],
   "peerDependencies": {
     "react": "^18.2.0 || ^19.0.0",
@@ -474,9 +483,9 @@
     "effect": "4.0.2"
   },
   "devDependencies": {
-    "@fungi.computer/maosaico": "0.1.0",
-    "@fungi.computer/sprite": "0.2.0",
-    "@fungi.computer/sprite-zdog": "0.3.0",
+    "@fungi.computer/maosaico": "0.1.1",
+    "@fungi.computer/sprite": "0.2.2",
+    "@fungi.computer/sprite-zdog": "0.3.2",
     "@ladle/react": "5.1.1",
     "@tailwindcss/cli": "4.2.1",
     "@types/react": "18.3.3",
@@ -502,7 +511,7 @@
   },
   "dependencies": {
     "@base-ui/react": "1.9.0",
-    "@fungi.computer/stipe": "0.1.0",
+    "@fungi.computer/stipe": "0.1.1",
     "@radix-ui/react-slot": "1.3.0",
     "@tailwindcss/typography": "0.5.19",
     "@tanstack/highlight": "0.0.9",

package/src/first-run.css

@@ -0,0 +1,100 @@
+/*
+ * First-run kit: SetupNotice (alert variants) and FailureLine. The panel
+ * variant is an ordinary EmptyState panel and needs no rules here.
+ */
+@layer utilities {
+  .caps-setup-notice-frame {
+    container-type: inline-size;
+  }
+  .caps-setup-notice-title {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+  }
+  .caps-setup-notice[data-variant] {
+    border-color: color-mix(in oklab, var(--color-warning) 45%, transparent);
+    background: color-mix(
+      in oklab,
+      var(--color-warning) 12%,
+      var(--stipe-surface-raised)
+    );
+    color: var(--color-base-content);
+  }
+  .caps-setup-notice-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--spacing-xs);
+  }
+  /* The panel's art: a warning bead at a size that holds the title. */
+  .caps-setup-notice-dot {
+    margin-block: var(--spacing-md);
+    scale: 2.5;
+  }
+  .caps-setup-notice-available {
+    color: var(--stipe-fg-muted);
+  }
+  .caps-setup-notice[data-variant="inline"] {
+    padding: var(--spacing-xs) var(--spacing-sm);
+    font-size: var(--text-sm);
+  }
+  .caps-setup-notice[data-variant="banner"] {
+    border-radius: 0;
+    border-inline: 0;
+  }
+  /* Narrow frame (a phone, or a narrow window): actions go under the copy. */
+  @container (width <= 36rem) {
+    .caps-setup-notice[data-variant] {
+      flex-direction: column;
+      align-items: stretch;
+    }
+    .caps-setup-notice[data-variant] > * {
+      flex: none;
+      width: 100%;
+    }
+    .caps-setup-notice-actions {
+      justify-content: flex-start;
+    }
+  }
+
+  .caps-failure-line {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-sm);
+    min-width: 0;
+    font-size: var(--text-sm);
+  }
+  .caps-failure-line-copy {
+    display: grid;
+    flex: 1;
+    min-width: 0;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line-count {
+    color: var(--stipe-fg-muted);
+    font-size: var(--text-xs);
+  }
+  .caps-failure-line > .caps-status {
+    margin-block-start: var(--spacing-2xs);
+  }
+  .caps-failure-line-actions {
+    display: flex;
+    flex: none;
+    gap: var(--spacing-2xs);
+  }
+  .caps-failure-line[data-density="tile"] {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: var(--spacing-md);
+    text-align: center;
+  }
+  .caps-failure-line[data-density="tile"] > .caps-status {
+    margin-block-start: 0;
+  }
+  .caps-failure-line[data-density="tile"] .caps-failure-line-copy {
+    flex: none;
+  }
+}