@skipleague/design 0.4.7 → 0.4.9

package/dist/AppLogo.d.ts

@@ -1,5 +1,5 @@
 /** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
-export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today";
+export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "flow";
 /**
  * The per-app logo mark — a brand-green rounded tile holding a white monoline
  * glyph. Replaces the single-letter {@link AppBadge}; gives each SkipLeague app a

package/dist/AppLogo.js

@@ -18,6 +18,10 @@ function glyphPaths(app, color) {
         case "today":
             // Sun = "today" / the day.
             return (_jsxs(_Fragment, { children: [_jsx("circle", { cx: "12", cy: "12", r: "3.8" }), _jsx("path", { d: "M12 2.6V5" }), _jsx("path", { d: "M12 19V21.4" }), _jsx("path", { d: "M2.6 12H5" }), _jsx("path", { d: "M19 12H21.4" }), _jsx("path", { d: "M5.2 5.2 6.9 6.9" }), _jsx("path", { d: "M17.1 17.1 18.8 18.8" }), _jsx("path", { d: "M18.8 5.2 17.1 6.9" }), _jsx("path", { d: "M6.9 17.1 5.2 18.8" })] }));
+        case "flow":
+            // Two workflow nodes joined by an elbow connector — orchestration
+            // ("when X happens, do Y").
+            return (_jsxs(_Fragment, { children: [_jsx("rect", { x: "3", y: "3", width: "8", height: "8", rx: "2" }), _jsx("rect", { x: "13", y: "13", width: "8", height: "8", rx: "2" }), _jsx("path", { d: "M7 11v3.5a2 2 0 0 0 2 2h3.5" })] }));
     }
 }
 /**

package/dist/BottomNav.js

@@ -97,7 +97,12 @@ export function BottomNav({ tabs, action, groups }) {
     const glow = activeTab?.color
         ? `0 0 22px 4px color-mix(in srgb, ${activeTab.color} 55%, transparent), 0 10px 22px color-mix(in srgb, ${activeTab.color} 30%, transparent)`
         : ACTION_GLOW;
-    return (_jsxs("nav", { style: { position: "relative", flex: "none" }, children: [_jsxs("div", { style: {
+    return (
+    // `display: block` is set explicitly (not left to the nav default) so a host
+    // app's global `nav { display: grid/flex }` rule can't override it and
+    // collapse the full-width bar — the children below rely on normal block flow
+    // (the bar fills the width; the floating "+" is absolutely positioned).
+    _jsxs("nav", { style: { display: "block", position: "relative", flex: "none" }, children: [_jsxs("div", { style: {
                     background: "var(--skl-color-surface)",
                     borderTop: "1px solid var(--skl-color-border)",
                     position: "relative",

package/dist/apps.js

@@ -12,6 +12,7 @@ export const SKIPLEAGUE_APPS = [
     { slug: "skipreading", name: "SkipReading", url: "https://reading.skipleague.com" },
     { slug: "skipgifts", name: "SkipGifts", url: "https://gifts.skipleague.com" },
     { slug: "skiptoday", name: "SkipToday", url: "https://today.skipleague.com" },
+    { slug: "skipflow", name: "SkipFlow", url: "https://flow.skipleague.com" },
 ];
 /** Default target for the menu's "Manage account" link (the platform account page). */
 export const SKIPLEAGUE_ACCOUNT_URL = "https://skipleague.com/account";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skipleague/design",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "description": "SkipUI — the SkipLeague design system: shared tokens and React components for every SkipLeague app.",
   "type": "module",
   "repository": {

package/src/AppLogo.tsx

@@ -1,7 +1,7 @@
 import type { CSSProperties, ReactNode } from "react";
 
 /** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
-export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today";
+export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "flow";
 
 // Exact 24×24 glyph paths (design_handoff_top_bar). `color` only matters for the
 // racquetball ball, which is filled rather than stroked.
@@ -65,6 +65,16 @@ function glyphPaths(app: AppGlyph, color: string): ReactNode {
           <path d="M6.9 17.1 5.2 18.8" />
         </>
       );
+    case "flow":
+      // Two workflow nodes joined by an elbow connector — orchestration
+      // ("when X happens, do Y").
+      return (
+        <>
+          <rect x="3" y="3" width="8" height="8" rx="2" />
+          <rect x="13" y="13" width="8" height="8" rx="2" />
+          <path d="M7 11v3.5a2 2 0 0 0 2 2h3.5" />
+        </>
+      );
   }
 }
 

package/src/BottomNav.tsx

@@ -168,7 +168,11 @@ export function BottomNav({ tabs, action, groups }: BottomNavProps) {
     : ACTION_GLOW;
 
   return (
-    <nav style={{ position: "relative", flex: "none" }}>
+    // `display: block` is set explicitly (not left to the nav default) so a host
+    // app's global `nav { display: grid/flex }` rule can't override it and
+    // collapse the full-width bar — the children below rely on normal block flow
+    // (the bar fills the width; the floating "+" is absolutely positioned).
+    <nav style={{ display: "block", position: "relative", flex: "none" }}>
       {/* Bar — clips the glow at its top edge ("the line"). */}
       <div
         style={{

package/src/apps.ts

@@ -22,6 +22,7 @@ export const SKIPLEAGUE_APPS: AppLink[] = [
   { slug: "skipreading", name: "SkipReading", url: "https://reading.skipleague.com" },
   { slug: "skipgifts", name: "SkipGifts", url: "https://gifts.skipleague.com" },
   { slug: "skiptoday", name: "SkipToday", url: "https://today.skipleague.com" },
+  { slug: "skipflow", name: "SkipFlow", url: "https://flow.skipleague.com" },
 ];
 
 /** Default target for the menu's "Manage account" link (the platform account page). */