@skipleague/design 0.6.0 → 0.7.1

package/dist/AppLogo.d.ts

@@ -1,5 +1,13 @@
 /** A SkipLeague app's logo glyph (monoline, drawn on the brand tile). */
 export type AppGlyph = "lists" | "racquetball" | "trips" | "gifts" | "reading" | "today" | "guide" | "flow";
+/** Every app that has a glyph, for slug→glyph resolution and fallbacks. */
+export declare const APP_GLYPHS: readonly AppGlyph[];
+/**
+ * Resolve a platform app slug (e.g. `"skipracquetball"`) to its {@link AppGlyph}
+ * by dropping the `skip` prefix, or `null` when no glyph exists for it (so a
+ * caller can fall back to a letter {@link AppBadge}). Case-insensitive.
+ */
+export declare function appGlyphForSlug(slug: string): AppGlyph | null;
 /**
  * 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

@@ -1,4 +1,24 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Every app that has a glyph, for slug→glyph resolution and fallbacks. */
+export const APP_GLYPHS = [
+    "lists",
+    "racquetball",
+    "trips",
+    "gifts",
+    "reading",
+    "today",
+    "guide",
+    "flow",
+];
+/**
+ * Resolve a platform app slug (e.g. `"skipracquetball"`) to its {@link AppGlyph}
+ * by dropping the `skip` prefix, or `null` when no glyph exists for it (so a
+ * caller can fall back to a letter {@link AppBadge}). Case-insensitive.
+ */
+export function appGlyphForSlug(slug) {
+    const key = slug.replace(/^skip/i, "").toLowerCase();
+    return APP_GLYPHS.includes(key) ? key : null;
+}
 // Exact 24×24 glyph paths (design_handoff_app_glyphs — the finalized round that
 // fixed racquetball, trips, and flow and added the guide mark). `color` only
 // matters for filled sub-shapes (e.g. the racquetball ball), which are filled

package/dist/ProfileMenu.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import { useEffect, useRef, useState } from "react";
 import { CircleUser, LogIn, LogOut, Settings } from "lucide-react";
 import { AppBadge } from "./AppBadge.js";
+import { AppLogo, appGlyphForSlug } from "./AppLogo.js";
 import { SKIPLEAGUE_ACCOUNT_URL, SKIPLEAGUE_APPS } from "./apps.js";
 /**
  * The canonical SkipLeague account control: a boxed user-icon button that opens
@@ -56,6 +57,10 @@ export function ProfileMenu({ user, currentSlug, apps = SKIPLEAGUE_APPS, enabled
                     display: "inline-flex",
                     alignItems: "center",
                     justifyContent: "center",
+                    // Explicit padding:0 — a host app's global `button { padding }` would
+                    // otherwise collapse this fixed 38×38 box's content area (border-box)
+                    // and shrink the icon to a dot.
+                    padding: 0,
                     width: 38,
                     height: 38,
                     borderRadius: "var(--skl-radius-control)",
@@ -66,7 +71,9 @@ export function ProfileMenu({ user, currentSlug, apps = SKIPLEAGUE_APPS, enabled
                     transition: "border-color 0.15s, color 0.15s",
                 }, children: _jsx(CircleUser, { size: 22 }) }), open && (_jsx("div", { role: "menu", style: menuStyle, children: showSignedOut ? (_jsxs(_Fragment, { children: [_jsx("div", { style: { padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }, children: _jsx("div", { style: { fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }, children: "Not signed in" }) }), _jsxs("button", { role: "menuitem", onClick: onSignIn, style: { ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }, children: [_jsx(LogIn, { size: 15 }), " ", signInLabel] })] })) : (_jsxs(_Fragment, { children: [_jsxs("div", { style: { padding: "0.5rem 0.75rem", borderBottom: "1px solid var(--skl-color-border)" }, children: [_jsx("div", { style: { fontWeight: 600, fontSize: "var(--skl-text-sm)", color: "var(--skl-color-text)" }, children: label }), user?.email && _jsx("div", { style: { fontSize: "var(--skl-text-xs)", color: "var(--skl-color-text-muted)" }, children: user.email })] }), visibleApps.length > 0 && (_jsxs(_Fragment, { children: [_jsx("div", { style: switchHeading, children: "Switch app" }), visibleApps.map((a) => {
                                     const isCurrent = a.slug === currentSlug;
-                                    const inner = (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [_jsx(AppBadge, { name: a.name }), a.name] }));
+                                    // Per-app glyph when one exists; letter badge otherwise.
+                                    const glyph = appGlyphForSlug(a.slug);
+                                    const inner = (_jsxs("span", { style: { display: "flex", alignItems: "center", gap: "0.5rem" }, children: [glyph ? _jsx(AppLogo, { app: glyph, size: 22 }) : _jsx(AppBadge, { name: a.name }), a.name] }));
                                     // The app you're in: light-green highlight, not clickable.
                                     return isCurrent ? (_jsx("div", { "aria-current": "page", style: { ...itemStyle, fontWeight: 600, background: "var(--skl-color-current-bg)", color: "var(--skl-color-current-text)", cursor: "default" }, children: inner }, a.slug)) : (_jsx("a", { href: a.url, role: "menuitem", style: itemStyle, children: inner }, a.slug));
                                 })] })), _jsx("div", { style: divider }), accountItem, _jsx("div", { style: divider }), _jsxs("button", { role: "menuitem", onClick: onSignOut, style: { ...itemStyle, width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer" }, children: [_jsx(LogOut, { size: 15 }), " Sign out"] })] })) }))] }));

package/dist/TopBar.js

@@ -82,6 +82,9 @@ export function TopBarIconButton({ tone = "dark", compact = false, style, childr
             justifyContent: "center",
             cursor: "pointer",
             flex: "0 0 auto",
+            // Explicit padding:0 so a host app's global `button { padding }` can't
+            // collapse this fixed-size box (border-box) and shrink the icon.
+            padding: 0,
             background: palette.background,
             border: `1px solid ${palette.border}`,
             color: palette.color,

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
-export { AppLogo } from "./AppLogo.js";
+export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export type { AppGlyph } from "./AppLogo.js";
 export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
 export type { TopBarTone } from "./TopBar.js";

package/dist/index.js

@@ -1,6 +1,6 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
-export { AppLogo } from "./AppLogo.js";
+export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
 export { SidebarNav } from "./SidebarNav.js";
 export { BottomNav } from "./BottomNav.js";

package/package.json

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

package/src/AppLogo.tsx

@@ -11,6 +11,28 @@ export type AppGlyph =
   | "guide"
   | "flow";
 
+/** Every app that has a glyph, for slug→glyph resolution and fallbacks. */
+export const APP_GLYPHS: readonly AppGlyph[] = [
+  "lists",
+  "racquetball",
+  "trips",
+  "gifts",
+  "reading",
+  "today",
+  "guide",
+  "flow",
+];
+
+/**
+ * Resolve a platform app slug (e.g. `"skipracquetball"`) to its {@link AppGlyph}
+ * by dropping the `skip` prefix, or `null` when no glyph exists for it (so a
+ * caller can fall back to a letter {@link AppBadge}). Case-insensitive.
+ */
+export function appGlyphForSlug(slug: string): AppGlyph | null {
+  const key = slug.replace(/^skip/i, "").toLowerCase();
+  return (APP_GLYPHS as readonly string[]).includes(key) ? (key as AppGlyph) : null;
+}
+
 // Exact 24×24 glyph paths (design_handoff_app_glyphs — the finalized round that
 // fixed racquetball, trips, and flow and added the guide mark). `color` only
 // matters for filled sub-shapes (e.g. the racquetball ball), which are filled

package/src/ProfileMenu.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { CircleUser, LogIn, LogOut, Settings } from "lucide-react";
 import { AppBadge } from "./AppBadge.js";
+import { AppLogo, appGlyphForSlug } from "./AppLogo.js";
 import { SKIPLEAGUE_ACCOUNT_URL, SKIPLEAGUE_APPS, type AppLink } from "./apps.js";
 
 export interface ProfileMenuUser {
@@ -160,6 +161,10 @@ export function ProfileMenu({
           display: "inline-flex",
           alignItems: "center",
           justifyContent: "center",
+          // Explicit padding:0 — a host app's global `button { padding }` would
+          // otherwise collapse this fixed 38×38 box's content area (border-box)
+          // and shrink the icon to a dot.
+          padding: 0,
           width: 38,
           height: 38,
           borderRadius: "var(--skl-radius-control)",
@@ -202,9 +207,11 @@ export function ProfileMenu({
                   <div style={switchHeading}>Switch app</div>
                   {visibleApps.map((a) => {
                     const isCurrent = a.slug === currentSlug;
+                    // Per-app glyph when one exists; letter badge otherwise.
+                    const glyph = appGlyphForSlug(a.slug);
                     const inner = (
                       <span style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-                        <AppBadge name={a.name} />
+                        {glyph ? <AppLogo app={glyph} size={22} /> : <AppBadge name={a.name} />}
                         {a.name}
                       </span>
                     );

package/src/TopBar.tsx

@@ -168,6 +168,9 @@ export function TopBarIconButton({
         justifyContent: "center",
         cursor: "pointer",
         flex: "0 0 auto",
+        // Explicit padding:0 so a host app's global `button { padding }` can't
+        // collapse this fixed-size box (border-box) and shrink the icon.
+        padding: 0,
         background: palette.background,
         border: `1px solid ${palette.border}`,
         color: palette.color,

package/src/index.ts

@@ -1,7 +1,7 @@
 export { ProfileMenu } from "./ProfileMenu.js";
 export type { ProfileMenuProps, ProfileMenuUser, ProfileMenuLinkArgs } from "./ProfileMenu.js";
 export { AppBadge } from "./AppBadge.js";
-export { AppLogo } from "./AppLogo.js";
+export { AppLogo, APP_GLYPHS, appGlyphForSlug } from "./AppLogo.js";
 export type { AppGlyph } from "./AppLogo.js";
 export { TopBar, TopBarIconButton, DesktopActionBar } from "./TopBar.js";
 export type { TopBarTone } from "./TopBar.js";