@cosxai/ui 0.1.0 → 0.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cosxai/ui",
-  "version": "0.1.0",
+  "version": "0.2.2",
   "description": "COSX design system — React 19 component primitives shared across product-meta and other consumers",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,6 +23,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
+  "scripts": {
+    "typecheck": "tsc --noEmit"
+  },
   "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
@@ -31,8 +34,5 @@
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "typescript": "^5.6.0"
-  },
-  "scripts": {
-    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/index.ts

@@ -21,6 +21,5 @@ export * from "./neobrutalism";
 export * from "./ambient";
 export * from "./terminal";
 export * from "./bento";
-export * from "./frutiger";
 export * from "./riso";
 export * from "./sketch";

package/src/primitives/Input.tsx

@@ -4,8 +4,22 @@ import { cn } from "../lib/cn";
 // Styled text input with optional label + error + helper text.
 // Three states: idle / focused / invalid. Focus ring + invalid border
 // both via :focus-visible / aria-invalid CSS — no JS branching.
+//
+// Optional `prefix` / `suffix` slots render INSIDE the bordered
+// field, separated from the input by a subtle hairline divider.
+// Common patterns:
+//   <Input prefix="https://"  …/>   →  `https://[ acme        ]`
+//   <Input suffix=".cosx.dev" …/>   →  `[ acme        ].cosx.dev`
+// Both can be set together. Prefer plain strings; ReactNode is
+// supported (e.g. icons) but inherits the muted helper colour.
 
-export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
+// We Omit "size" (HTMLInputElement's number-of-visible-chars attr;
+// conflicts with our absent layout-size prop and is rarely needed in
+// CSS-styled inputs) AND "prefix" (HTML's RDFa metadata attr —
+// taking that prop name here lets us expose an addon slot with the
+// most intuitive name; consumers needing the rare RDFa attr can
+// drop down to a native <input>).
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "prefix"> {
   label?: ReactNode;
   helper?: ReactNode;
   // Validation error message. When set, the input renders an
@@ -14,18 +28,77 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
   error?: string | null;
   // Width preset — full, fixed, or auto (default full).
   fit?: "full" | "auto";
+  // Inline addons rendered inside the bordered field. Use for
+  // protocol prefixes ("https://"), domain suffixes (".cosx.dev"),
+  // currency symbols, unit labels, search icons, etc.
+  prefix?: ReactNode;
+  suffix?: ReactNode;
 }
 
+const ADDON_STYLE = {
+  display: "inline-flex",
+  alignItems: "center",
+  padding: "0 12px",
+  font: "400 13px/1 var(--ck-font-mono, var(--ck-font-sans))",
+  color: "var(--ck-text-secondary)",
+  // `--ck-bg-muted` is the canonical "slightly recessed slab"
+  // background — gives the addon visible separation from the input
+  // (`--ck-bg-surface`) without needing a hard divider line. The
+  // bg shift carries across all chromes; tokens.css defines a
+  // muted tone per chrome (light + dark).
+  background: "var(--ck-bg-muted)",
+  whiteSpace: "nowrap" as const,
+  userSelect: "none" as const,
+};
+
 export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
-  { label, helper, error, fit = "full", className, id, ...rest },
+  { label, helper, error, fit = "full", prefix, suffix, className, id, style, ...rest },
   ref,
 ) {
   const autoId = useId();
   const inputId = id ?? autoId;
+  const hasAddon = prefix != null || suffix != null;
+
+  // Border / radius live on the WRAPPER when there's an addon so the
+  // addon + input share one continuous frame. Otherwise the input
+  // itself carries the border (preserves the prior visual contract).
+  const fieldBorder = `1px solid ${error ? "var(--ck-critical)" : "var(--ck-border-strong)"}`;
+  const fieldRadius = "var(--ck-radius-sm)";
+
+  const inputEl = (
+    <input
+      ref={ref}
+      id={inputId}
+      aria-invalid={error ? true : undefined}
+      aria-describedby={(helper || error) ? `${inputId}-helper` : undefined}
+      {...rest}
+      className={cn("ck-input", hasAddon ? "ck-input--with-addon" : undefined)}
+      style={{
+        flex: hasAddon ? "1 1 auto" : undefined,
+        minWidth: 0,
+        height: hasAddon ? "100%" : 36,
+        padding: "0 12px",
+        font: "400 13px/1 var(--ck-font-sans)",
+        background: "var(--ck-bg-surface)",
+        color: "var(--ck-text-primary)",
+        border: hasAddon ? "none" : fieldBorder,
+        borderRadius: hasAddon ? 0 : fieldRadius,
+        outline: "none",
+        transition: "border-color var(--ck-dur-fast) var(--ck-ease)",
+        ...(style ?? {}),
+      }}
+    />
+  );
+
   return (
     <div
       className={cn("ck-input-field", className)}
-      style={{ display: "flex", flexDirection: "column", gap: 6, width: fit === "full" ? "100%" : undefined }}
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 6,
+        width: fit === "full" ? "100%" : undefined,
+      }}
     >
       {label && (
         <label
@@ -36,25 +109,34 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
           {label}
         </label>
       )}
-      <input
-        ref={ref}
-        id={inputId}
-        aria-invalid={error ? true : undefined}
-        aria-describedby={(helper || error) ? `${inputId}-helper` : undefined}
-        {...rest}
-        className="ck-input"
-        style={{
-          height: 34,
-          padding: "0 12px",
-          font: "400 13px/1 var(--ck-font-sans)",
-          background: "var(--ck-bg-surface)",
-          color: "var(--ck-text-primary)",
-          border: `1px solid ${error ? "var(--ck-critical)" : "var(--ck-border-strong)"}`,
-          borderRadius: "var(--ck-radius-sm)",
-          outline: "none",
-          transition: "border-color var(--ck-dur-fast) var(--ck-ease)",
-        }}
-      />
+      {hasAddon ? (
+        <div
+          className="ck-input-addon-wrap"
+          style={{
+            display: "flex",
+            alignItems: "stretch",
+            height: 36,
+            background: "var(--ck-bg-surface)",
+            border: fieldBorder,
+            borderRadius: fieldRadius,
+            overflow: "hidden",
+          }}
+        >
+          {prefix != null && (
+            <span className="ck-input-addon ck-input-addon--prefix" style={ADDON_STYLE}>
+              {prefix}
+            </span>
+          )}
+          {inputEl}
+          {suffix != null && (
+            <span className="ck-input-addon ck-input-addon--suffix" style={ADDON_STYLE}>
+              {suffix}
+            </span>
+          )}
+        </div>
+      ) : (
+        inputEl
+      )}
       {(helper || error) && (
         <div
           id={`${inputId}-helper`}

package/src/styles/index.css

@@ -13,7 +13,6 @@
 @import "./chrome-swiss.css";
 @import "./chrome-terminal.css";
 @import "./chrome-bento.css";
-@import "./chrome-frutiger.css";
 @import "./chrome-riso.css";
 @import "./chrome-sketch.css";
 

package/src/styles/tokens.css

@@ -683,100 +683,6 @@ html[data-ck-theme="dark"][data-ck-chrome="bento"] {
               top-highlight on every elevated element, soft blue-
               tinted shadows + outer glow on hover. Image-driven,
               optimistic, intentionally pretty. */
-html[data-ck-chrome="frutiger"] {
-  /* Sky gradient as canvas — the whole page sits on it. */
-  --ck-bg-canvas:    linear-gradient(180deg, #87CEEB 0%, #B3E5FC 45%, #E1F5FE 100%);
-  --ck-bg-sidebar:   rgba(255, 255, 255, 0.55);
-  --ck-bg-surface:   rgba(255, 255, 255, 0.62);
-  --ck-bg-surface-2: rgba(255, 255, 255, 0.78);
-  --ck-bg-muted:     rgba(255, 255, 255, 0.4);
-
-  /* Cool, near-white borders with a hint of sky — they read as
-     light catching the edge of glass. */
-  --ck-border-subtle: rgba(255, 255, 255, 0.55);
-  --ck-border-strong: rgba(26, 35, 126, 0.18);
-  --ck-border-focus:  var(--ck-accent);
-
-  /* Deep navy ink — black is too harsh against sky. */
-  --ck-text-primary:   #0E1A6B;
-  --ck-text-secondary: #38507A;
-  --ck-text-tertiary:  #6C82A8;
-  --ck-text-disabled:  #B7C6DD;
-  --ck-text-inverse:   #FFFFFF;
-
-  /* Aqua accent — the canonical Aero blue. */
-  --ck-accent:         var(--ck-accent-light-override, #0288D1);
-  --ck-accent-hover:   #01579B;
-  --ck-accent-muted:   color-mix(in oklab, var(--ck-accent) 14%, transparent);
-  --ck-accent-border:  color-mix(in oklab, var(--ck-accent) 38%, transparent);
-
-  /* Lime pop — used very sparingly for "go" / new / on-states. */
-  --ck-frutiger-lime:  #C6FF00;
-  --ck-frutiger-orange: #FF9800;
-
-  /* Glossy gradient stacks — applied to buttons via background-
-     image. Two layers: the aqua tint at the bottom, the white
-     gloss highlight on the top half. */
-  --ck-frutiger-btn:    linear-gradient(180deg, #4FC3F7 0%, #0288D1 50%, #01579B 100%);
-  --ck-frutiger-btn-hover: linear-gradient(180deg, #81D4FA 0%, #039BE5 50%, #0277BD 100%);
-  --ck-frutiger-gloss:  linear-gradient(180deg, rgba(255,255,255,0.65) 0%, rgba(255,255,255,0) 50%, rgba(255,255,255,0) 100%);
-
-  /* Generous "pebble" radii. */
-  --ck-radius-xs: 8px;
-  --ck-radius-sm: 12px;
-  --ck-radius-md: 16px;
-  --ck-radius-lg: 20px;
-  --ck-radius-xl: 28px;
-
-  /* Soft blue-tinted shadows — never dark/crisp. */
-  --ck-shadow-1: 0 2px 8px rgba(0, 100, 200, 0.12);
-  --ck-shadow-2: 0 4px 16px rgba(0, 100, 200, 0.18), 0 1px 2px rgba(0, 100, 200, 0.08);
-  --ck-shadow-3: 0 12px 40px rgba(0, 100, 200, 0.28), 0 2px 6px rgba(0, 100, 200, 0.14);
-
-  /* The "Aero glow" — used on hover/focus. */
-  --ck-frutiger-glow:   0 0 24px rgba(79, 195, 247, 0.55);
-  --ck-frutiger-glow-soft: 0 0 14px rgba(79, 195, 247, 0.35);
-}
-
-html[data-ck-theme="dark"][data-ck-chrome="frutiger"] {
-  /* Twilight / aurora sky for dark — the brief lives in light,
-     but a coherent dark mode keeps the chrome usable. Deep
-     navy → indigo → soft lavender gradient. Glass surfaces
-     become darker translucent panels. */
-  --ck-bg-canvas:    linear-gradient(180deg, #0B1029 0%, #1A2167 50%, #2E2280 100%);
-  --ck-bg-sidebar:   rgba(20, 30, 80, 0.55);
-  --ck-bg-surface:   rgba(30, 45, 110, 0.55);
-  --ck-bg-surface-2: rgba(45, 60, 130, 0.65);
-  --ck-bg-muted:     rgba(20, 30, 80, 0.4);
-
-  --ck-border-subtle: rgba(255, 255, 255, 0.16);
-  --ck-border-strong: rgba(255, 255, 255, 0.28);
-
-  --ck-text-primary:   #EAF3FF;
-  --ck-text-secondary: #B7C6E8;
-  --ck-text-tertiary:  #8094BE;
-  --ck-text-disabled:  #4B5C84;
-  --ck-text-inverse:   #0E1A6B;
-
-  --ck-accent:         var(--ck-accent-dark-override, var(--ck-accent-light-override, #4FC3F7));
-
-  --ck-frutiger-btn:   linear-gradient(180deg, #4FC3F7 0%, #0288D1 50%, #01579B 100%);
-  --ck-frutiger-btn-hover: linear-gradient(180deg, #81D4FA 0%, #039BE5 50%, #0277BD 100%);
-
-  --ck-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
-  --ck-shadow-2: 0 4px 16px rgba(0, 0, 0, 0.42), 0 1px 2px rgba(0, 0, 0, 0.32);
-  --ck-shadow-3: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.32);
-
-  --ck-frutiger-glow: 0 0 24px rgba(129, 212, 250, 0.45);
-  --ck-frutiger-glow-soft: 0 0 14px rgba(129, 212, 250, 0.3);
-}
-
-/* ---------- Risograph / Zine Print chrome — DIY print culture as
-              a digital aesthetic. Warm uncoated paper canvas, 2-3
-              fluorescent inks per composition (pink/blue/yellow
-              signature trio), halftone dots, misregistration
-              offset, hand-drawn imperfection, bold display type
-              + workhorse mono body. Anti-glossy, anti-gradient. */
 html[data-ck-chrome="riso"] {
   /* Warm cream paper, never flat white. */
   --ck-bg-canvas:    #F4EFE5;

package/src/theme/ThemeProvider.tsx

@@ -6,6 +6,7 @@ import {
   type ReactNode,
 } from "react";
 import { ThemeContext } from "./theme-context";
+import { BUILTIN_CHROMES } from "./types";
 import type { Theme, Chrome, ThemeContextValue } from "./types";
 
 const DEFAULT_THEME_KEY = "ck-theme";
@@ -63,7 +64,12 @@ export function ThemeProvider({
     return stored ?? preferredTheme(defaultTheme);
   });
   const [chrome, setChromeState] = useState<Chrome>(() => {
-    const stored = readStored<Chrome>(chromeStorageKey, ["classic", "seamless"]);
+    // Allow every built-in chrome out of localStorage. Custom strings
+    // (the `(string & {})` half of the Chrome union) are not
+    // persisted across reloads — consumers that ship custom chromes
+    // can opt-in via a separate localStorage write upstream of this
+    // provider if they want persistence.
+    const stored = readStored<Chrome>(chromeStorageKey, BUILTIN_CHROMES);
     return stored ?? defaultChrome;
   });
 

package/src/theme/index.ts

@@ -2,4 +2,5 @@ export { ThemeProvider } from "./ThemeProvider";
 export type { ThemeProviderProps } from "./ThemeProvider";
 export { useTheme } from "./useTheme";
 export { getInlineThemeScript } from "./inline-script";
+export { BUILTIN_CHROMES } from "./types";
 export type { Theme, Chrome, ThemeContextValue } from "./types";

package/src/theme/inline-script.ts

@@ -1,3 +1,4 @@
+import { BUILTIN_CHROMES } from "./types";
 import type { Theme, Chrome } from "./types";
 
 // Pre-mount inline script generator. Paste the returned string
@@ -22,6 +23,9 @@ export function getInlineThemeScript(opts: {
   const c = JSON.stringify(opts.chromeStorageKey ?? "ck-chrome");
   const dt = JSON.stringify(opts.defaultTheme ?? "system");
   const dc = JSON.stringify(opts.defaultChrome ?? "seamless");
+  // Inline the allowlist so the runtime check is a single
+  // Array.indexOf — matches ThemeProvider's readStored behaviour.
+  const allowed = JSON.stringify(BUILTIN_CHROMES);
   return `(function(){try{
     var t=localStorage.getItem(${t});
     if(t!=="light"&&t!=="dark"){
@@ -30,7 +34,7 @@ export function getInlineThemeScript(opts: {
     }
     document.documentElement.setAttribute("data-ck-theme",t);
     var c=localStorage.getItem(${c});
-    if(c!=="classic"&&c!=="seamless")c=${dc};
+    if(${allowed}.indexOf(c)<0)c=${dc};
     document.documentElement.setAttribute("data-ck-chrome",c);
   }catch(e){}})();`;
 }

package/src/theme/types.ts

@@ -6,12 +6,29 @@
 
 export type Theme = "light" | "dark";
 
+// BUILTIN_CHROMES is the source of truth for "chromes the kit ships
+// with". The Chrome union below, the ThemeProvider localStorage
+// validator, and the pre-mount inline script all key off this
+// constant so adding (or removing) a chrome is a one-place change.
+export const BUILTIN_CHROMES = [
+  "classic",
+  "seamless",
+  "editorial",
+  "neobrutalism",
+  "ambient",
+  "swiss",
+  "terminal",
+  "bento",
+  "riso",
+  "sketch",
+] as const;
+
 // Built-in chromes ship with the kit; custom strings are also
 // allowed at runtime (the kit just stamps the value onto
 // `data-ck-chrome`, your CSS supplies the overrides). The
 // `(string & {})` trick preserves autocomplete for the built-ins
 // while widening the union to any string for custom chromes.
-export type Chrome = "classic" | "seamless" | "editorial" | "neobrutalism" | "ambient" | "swiss" | "terminal" | "bento" | "frutiger" | "riso" | "sketch" | (string & {});
+export type Chrome = (typeof BUILTIN_CHROMES)[number] | (string & {});
 
 export interface ThemeContextValue {
   theme: Theme;

package/src/frutiger/GlossyOrb.tsx

@@ -1,79 +0,0 @@
-import type { CSSProperties } from "react";
-
-// Pure CSS 3D glass orb — the "Aero" / Vista / iOS 6 marble.
-// Layered radial gradients: deep accent base, top white highlight,
-// bottom internal reflection, soft outer glow. Drop it anywhere
-// you want a hero / empty-state decoration.
-
-export interface GlossyOrbProps {
-  size?: number;
-  // Tint of the orb. Defaults to aqua (Aero blue). Pass any color.
-  tone?: "aqua" | "lime" | "rose" | "amber";
-  // Disable the slow rotation animation.
-  static?: boolean;
-  className?: string;
-  style?: CSSProperties;
-}
-
-const TONES: Record<NonNullable<GlossyOrbProps["tone"]>, { base: string; deep: string; glow: string }> = {
-  aqua:  { base: "#4FC3F7", deep: "#01579B", glow: "rgba(79, 195, 247, 0.55)" },
-  lime:  { base: "#DCFF66", deep: "#7CB342", glow: "rgba(198, 255, 0, 0.55)" },
-  rose:  { base: "#F48FB1", deep: "#AD1457", glow: "rgba(244, 143, 177, 0.55)" },
-  amber: { base: "#FFCA28", deep: "#E65100", glow: "rgba(255, 152, 0, 0.55)" },
-};
-
-export function GlossyOrb({
-  size = 96,
-  tone = "aqua",
-  static: noSpin,
-  className,
-  style,
-}: GlossyOrbProps) {
-  const t = TONES[tone];
-  return (
-    <div
-      className={className}
-      aria-hidden
-      style={{
-        width: size,
-        height: size,
-        borderRadius: "50%",
-        position: "relative",
-        background: `
-          radial-gradient(circle at 50% 28%, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.0) 32%),
-          radial-gradient(circle at 50% 95%, ${t.base} 0%, transparent 40%),
-          radial-gradient(circle at 50% 50%, ${t.base} 0%, ${t.deep} 100%)
-        `,
-        boxShadow: `
-          0 ${size * 0.12}px ${size * 0.28}px ${t.glow},
-          inset 0 ${size * 0.08}px ${size * 0.12}px rgba(255, 255, 255, 0.55),
-          inset 0 -${size * 0.08}px ${size * 0.16}px rgba(0, 0, 0, 0.22)
-        `,
-        animation: noSpin ? undefined : "ck-frutiger-orb-spin 18s linear infinite",
-        ...style,
-      }}
-    >
-      {/* Specular highlight — small bright cap top-left */}
-      <span
-        style={{
-          position: "absolute",
-          top: size * 0.1,
-          left: size * 0.22,
-          width: size * 0.36,
-          height: size * 0.22,
-          borderRadius: "50%",
-          background: "radial-gradient(ellipse, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 70%)",
-        }}
-      />
-      <style>{`
-        @keyframes ck-frutiger-orb-spin {
-          0%   { transform: rotate(0deg); }
-          100% { transform: rotate(360deg); }
-        }
-        @media (prefers-reduced-motion: reduce) {
-          [data-ck-glossy-orb] { animation: none !important; }
-        }
-      `}</style>
-    </div>
-  );
-}

package/src/frutiger/SkyBackdrop.tsx

@@ -1,114 +0,0 @@
-import type { CSSProperties, ReactNode } from "react";
-
-// Drop-in section backdrop. The frutiger chrome already paints the
-// page with a sky gradient — this component is for opt-in moments
-// inside other chromes (a hero banner under chrome="classic", a
-// preview area in the theming page) without flipping the whole app.
-
-export interface SkyBackdropProps {
-  children?: ReactNode;
-  // Add the floating sparkle particles. Defaults to true.
-  sparkles?: boolean;
-  // Add soft white cumulus blobs near the bottom. Defaults to true.
-  clouds?: boolean;
-  // Variant: dusk swaps the gradient for indigo→lavender→pink.
-  variant?: "day" | "dusk";
-  className?: string;
-  style?: CSSProperties;
-}
-
-const DAY_BG = "linear-gradient(180deg, #87CEEB 0%, #B3E5FC 45%, #E1F5FE 100%)";
-const DUSK_BG = "linear-gradient(180deg, #2E2280 0%, #6A4C93 40%, #F4A6CD 80%, #FFD8B1 100%)";
-
-export function SkyBackdrop({
-  children,
-  sparkles = true,
-  clouds = true,
-  variant = "day",
-  className,
-  style,
-}: SkyBackdropProps) {
-  return (
-    <div
-      className={className}
-      style={{
-        position: "relative",
-        overflow: "hidden",
-        background: variant === "dusk" ? DUSK_BG : DAY_BG,
-        ...style,
-      }}
-    >
-      {clouds && <Clouds variant={variant} />}
-      {sparkles && <Sparkles />}
-      <div style={{ position: "relative", zIndex: 2 }}>{children}</div>
-    </div>
-  );
-}
-
-function Clouds({ variant }: { variant: "day" | "dusk" }) {
-  const tint = variant === "dusk" ? "rgba(255, 220, 230, 0.5)" : "rgba(255, 255, 255, 0.6)";
-  return (
-    <div
-      aria-hidden
-      style={{
-        position: "absolute",
-        inset: 0,
-        background: `
-          radial-gradient(ellipse 280px 80px at 14% 78%, ${tint} 0%, transparent 70%),
-          radial-gradient(ellipse 360px 90px at 72% 86%, ${tint} 0%, transparent 70%),
-          radial-gradient(ellipse 200px 60px at 50% 92%, ${tint} 0%, transparent 70%)
-        `,
-        pointerEvents: "none",
-        zIndex: 1,
-      }}
-    />
-  );
-}
-
-function Sparkles() {
-  // 14 deterministic positions — random feels jittery on reload.
-  const dots = [
-    { x: 8, y: 22, s: 3, o: 0.85 },
-    { x: 18, y: 12, s: 2, o: 0.65 },
-    { x: 31, y: 32, s: 4, o: 0.9 },
-    { x: 44, y: 18, s: 2, o: 0.55 },
-    { x: 56, y: 42, s: 3, o: 0.7 },
-    { x: 68, y: 14, s: 2, o: 0.6 },
-    { x: 76, y: 30, s: 5, o: 0.8 },
-    { x: 88, y: 24, s: 2, o: 0.55 },
-    { x: 22, y: 56, s: 3, o: 0.55 },
-    { x: 38, y: 64, s: 2, o: 0.5 },
-    { x: 60, y: 60, s: 4, o: 0.7 },
-    { x: 82, y: 50, s: 2, o: 0.55 },
-    { x: 12, y: 42, s: 2, o: 0.5 },
-    { x: 50, y: 28, s: 2, o: 0.7 },
-  ];
-  return (
-    <div
-      aria-hidden
-      style={{
-        position: "absolute",
-        inset: 0,
-        pointerEvents: "none",
-        zIndex: 1,
-      }}
-    >
-      {dots.map((d, i) => (
-        <span
-          key={i}
-          style={{
-            position: "absolute",
-            left: `${d.x}%`,
-            top: `${d.y}%`,
-            width: d.s,
-            height: d.s,
-            borderRadius: "50%",
-            background: "#FFFFFF",
-            opacity: d.o,
-            boxShadow: `0 0 ${d.s * 4}px ${d.s * 1.5}px rgba(255, 255, 255, ${d.o * 0.55})`,
-          }}
-        />
-      ))}
-    </div>
-  );
-}

package/src/frutiger/index.ts

@@ -1,2 +0,0 @@
-export * from "./SkyBackdrop";
-export * from "./GlossyOrb";

package/src/styles/chrome-frutiger.css

@@ -1,364 +0,0 @@
-/* Frutiger Aero / Glossy Revival chrome — Aero / Vista / iOS 6 /
-   Vision Pro Liquid Glass. Glossy buttons with a two-layer gradient
-   (aqua base + white gloss top half), glass cards with backdrop-
-   filter, soft blue-tinted shadows, outer glow on hover, deep navy
-   ink. Sparkle particles + shimmer sweeps are opt-in via classnames
-   so the chrome only "performs" when you want it to.
-
-   Implementation note: the sky-gradient canvas is applied via the
-   tokens.css `--ck-bg-canvas`. The kit's base layer already does
-   `body { background: var(--ck-bg-canvas); }` so the gradient
-   value carries through. */
-
-/* Body — humanist sans, deep navy, slightly tighter letter-spacing
-   on hero text. */
-html[data-ck-chrome="frutiger"] body {
-  font-family: "Avenir Next", "Calibre", "SF Pro Rounded", var(--ck-font-sans);
-  background-attachment: fixed;
-  letter-spacing: -0.005em;
-}
-
-html[data-ck-chrome="frutiger"] h1,
-html[data-ck-chrome="frutiger"] .ck-h1 {
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  line-height: 1.05;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8),
-    0 2px 4px rgba(0, 100, 200, 0.18);
-}
-html[data-ck-chrome="frutiger"] h2,
-html[data-ck-chrome="frutiger"] .ck-h2 {
-  font-weight: 600;
-  letter-spacing: -0.005em;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
-}
-html[data-ck-chrome="frutiger"] h3,
-html[data-ck-chrome="frutiger"] .ck-h3 {
-  font-weight: 600;
-}
-
-/* Dark mode: drop the white text-shadow (would look like a bug
-   against the navy canvas). */
-html[data-ck-theme="dark"][data-ck-chrome="frutiger"] h1,
-html[data-ck-theme="dark"][data-ck-chrome="frutiger"] h2,
-html[data-ck-theme="dark"][data-ck-chrome="frutiger"] h3 {
-  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
-}
-
-/* ---------- Buttons — the signature glossy candy element ---------- */
-html[data-ck-chrome="frutiger"] .ck-btn,
-html[data-ck-chrome="frutiger"] .ck-actionbar-btn {
-  border-radius: 12px;
-  font-weight: 600;
-  letter-spacing: -0.005em;
-  height: 36px;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.6),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.2),
-    0 2px 8px rgba(0, 100, 200, 0.18);
-  transition:
-    box-shadow 200ms ease,
-    transform 200ms ease,
-    background 200ms ease;
-}
-
-html[data-ck-chrome="frutiger"] .ck-btn--primary,
-html[data-ck-chrome="frutiger"] .ck-actionbar-btn--primary {
-  background:
-    var(--ck-frutiger-gloss),
-    var(--ck-frutiger-btn);
-  color: #FFFFFF;
-  text-shadow: 0 1px 0 rgba(0, 50, 120, 0.45);
-  border-color: rgba(2, 88, 155, 0.7);
-}
-html[data-ck-chrome="frutiger"] .ck-btn--primary:hover:not(:disabled),
-html[data-ck-chrome="frutiger"] .ck-actionbar-btn--primary:hover:not(:disabled) {
-  background:
-    var(--ck-frutiger-gloss),
-    var(--ck-frutiger-btn-hover);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.75),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.2),
-    var(--ck-frutiger-glow);
-}
-
-html[data-ck-chrome="frutiger"] .ck-btn--secondary {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.35) 50%, rgba(255,255,255,0.55) 100%);
-  color: var(--ck-text-primary);
-  border-color: rgba(255, 255, 255, 0.65);
-  backdrop-filter: blur(8px);
-}
-html[data-ck-chrome="frutiger"] .ck-btn--secondary:hover:not(:disabled) {
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.8),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.18),
-    var(--ck-frutiger-glow-soft);
-}
-
-html[data-ck-chrome="frutiger"] .ck-btn--ghost {
-  background: rgba(255, 255, 255, 0.0);
-  border-color: transparent;
-  box-shadow: none;
-  color: var(--ck-text-primary);
-}
-html[data-ck-chrome="frutiger"] .ck-btn--ghost:hover:not(:disabled) {
-  background: rgba(255, 255, 255, 0.35);
-  border-color: rgba(255, 255, 255, 0.45);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.6),
-    0 1px 4px rgba(0, 100, 200, 0.14);
-}
-
-html[data-ck-chrome="frutiger"] .ck-btn:active:not(:disabled),
-html[data-ck-chrome="frutiger"] .ck-actionbar-btn:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-/* ---------- Inputs — inset glass, glow on focus ---------- */
-html[data-ck-chrome="frutiger"] .ck-input,
-html[data-ck-chrome="frutiger"] .ck-textarea {
-  background:
-    linear-gradient(180deg, rgba(0, 50, 120, 0.06) 0%, rgba(255, 255, 255, 0.6) 18%);
-  border: 1px solid rgba(0, 60, 140, 0.18);
-  border-radius: 12px;
-  box-shadow:
-    inset 0 2px 4px rgba(0, 50, 120, 0.12),
-    0 1px 0 rgba(255, 255, 255, 0.85);
-  color: var(--ck-text-primary);
-}
-html[data-ck-chrome="frutiger"] .ck-input::placeholder,
-html[data-ck-chrome="frutiger"] .ck-textarea::placeholder {
-  color: rgba(56, 80, 122, 0.55);
-}
-html[data-ck-chrome="frutiger"] .ck-input:focus-visible,
-html[data-ck-chrome="frutiger"] .ck-textarea:focus-visible {
-  outline: none;
-  border-color: var(--ck-accent) !important;
-  box-shadow:
-    inset 0 2px 4px rgba(0, 50, 120, 0.12),
-    var(--ck-frutiger-glow-soft) !important;
-}
-
-/* ---------- Cards — glass plate with top highlight + bottom shadow line */
-html[data-ck-chrome="frutiger"] .ck-card {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%);
-  backdrop-filter: blur(20px) saturate(140%);
-  -webkit-backdrop-filter: blur(20px) saturate(140%);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  border-radius: 18px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.85),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.14),
-    var(--ck-shadow-2);
-  position: relative;
-}
-html[data-ck-chrome="frutiger"] .ck-card__head {
-  background: transparent;
-  border-bottom: 1px solid rgba(0, 50, 120, 0.1);
-  padding: 14px 20px;
-}
-html[data-ck-chrome="frutiger"] .ck-card__foot {
-  background: transparent;
-  border-top: 1px solid rgba(0, 50, 120, 0.08);
-  padding: 12px 20px;
-}
-
-/* ---------- Tags — glossy pills ---------- */
-html[data-ck-chrome="frutiger"] [data-ck-tag] {
-  border-radius: 999px !important;
-  padding: 3px 10px !important;
-  font-weight: 600 !important;
-  font-size: 11px !important;
-  letter-spacing: 0 !important;
-  text-transform: none !important;
-  border: 1px solid rgba(255, 255, 255, 0.5) !important;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.12),
-    0 1px 3px rgba(0, 100, 200, 0.14) !important;
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.75) 0%, rgba(255,255,255,0.35) 100%) !important;
-  color: var(--ck-text-primary) !important;
-}
-html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="accent"] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
-    linear-gradient(180deg, #4FC3F7 0%, #0288D1 100%) !important;
-  color: #FFFFFF !important;
-  text-shadow: 0 1px 0 rgba(0, 50, 120, 0.4);
-  border-color: rgba(2, 119, 189, 0.7) !important;
-}
-html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="success"] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
-    linear-gradient(180deg, #DCFF66 0%, #C6FF00 100%) !important;
-  color: #2A3A00 !important;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
-  border-color: rgba(120, 160, 0, 0.5) !important;
-}
-html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="warning"] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
-    linear-gradient(180deg, #FFCA28 0%, #FF9800 100%) !important;
-  color: #4A2400 !important;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
-  border-color: rgba(180, 100, 0, 0.5) !important;
-}
-html[data-ck-chrome="frutiger"] [data-ck-tag][data-tone="critical"] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 50%),
-    linear-gradient(180deg, #FF7B7B 0%, #D32F2F 100%) !important;
-  color: #FFFFFF !important;
-  text-shadow: 0 1px 0 rgba(140, 20, 20, 0.6);
-  border-color: rgba(150, 30, 30, 0.7) !important;
-}
-
-/* ---------- Layout chrome ---------- */
-html[data-ck-chrome="frutiger"] [data-ck-leftnav] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.45) 100%) !important;
-  backdrop-filter: blur(28px) saturate(150%);
-  -webkit-backdrop-filter: blur(28px) saturate(150%);
-  border-right: 1px solid rgba(255, 255, 255, 0.55);
-  box-shadow: inset -1px 0 0 rgba(0, 50, 120, 0.1),
-    4px 0 24px rgba(0, 100, 200, 0.12);
-}
-
-html[data-ck-chrome="frutiger"] [data-ck-topbar] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.78) 0%, rgba(255,255,255,0.55) 100%) !important;
-  backdrop-filter: blur(28px) saturate(150%);
-  -webkit-backdrop-filter: blur(28px) saturate(150%);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.85),
-    0 2px 12px rgba(0, 100, 200, 0.1);
-}
-
-/* NavItem — glassy pill, accent on active */
-html[data-ck-chrome="frutiger"] [data-ck-navitem] {
-  background: transparent !important;
-  border-radius: 10px !important;
-  font-weight: 500 !important;
-  color: var(--ck-text-secondary) !important;
-  transition: background 200ms ease, box-shadow 200ms ease;
-}
-html[data-ck-chrome="frutiger"] [data-ck-navitem]:not([data-active="true"]):hover {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.35) 100%) !important;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.7),
-    0 1px 4px rgba(0, 100, 200, 0.12) !important;
-  color: var(--ck-text-primary) !important;
-}
-html[data-ck-chrome="frutiger"] [data-ck-navitem][data-active="true"] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 50%),
-    linear-gradient(180deg, #4FC3F7 0%, #0288D1 100%) !important;
-  color: #FFFFFF !important;
-  text-shadow: 0 1px 0 rgba(0, 50, 120, 0.4) !important;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.6),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.18),
-    0 2px 8px rgba(0, 100, 200, 0.28) !important;
-  font-weight: 600 !important;
-}
-
-/* Search trigger */
-html[data-ck-chrome="frutiger"] [data-ck-search-trigger] {
-  background:
-    linear-gradient(180deg, rgba(0, 50, 120, 0.06) 0%, rgba(255, 255, 255, 0.65) 18%) !important;
-  border: 1px solid rgba(0, 60, 140, 0.18) !important;
-  border-radius: 12px !important;
-  box-shadow:
-    inset 0 2px 4px rgba(0, 50, 120, 0.1),
-    0 1px 0 rgba(255, 255, 255, 0.85) !important;
-  color: var(--ck-text-secondary) !important;
-}
-
-/* Action bar */
-html[data-ck-chrome="frutiger"] [data-ck-actionbar] {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.55) 100%) !important;
-  backdrop-filter: blur(28px) saturate(150%);
-  -webkit-backdrop-filter: blur(28px) saturate(150%);
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  border-radius: 999px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.9),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.14),
-    var(--ck-shadow-3);
-}
-
-/* Modal — frosted plate */
-html[data-ck-chrome="frutiger"] [role="dialog"] > div:first-child {
-  background: rgba(135, 206, 235, 0.35);
-  backdrop-filter: blur(16px) saturate(160%);
-  -webkit-backdrop-filter: blur(16px) saturate(160%);
-}
-html[data-ck-chrome="frutiger"] [role="dialog"] > div > div {
-  background:
-    linear-gradient(180deg, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.65) 100%) !important;
-  backdrop-filter: blur(28px) saturate(160%);
-  -webkit-backdrop-filter: blur(28px) saturate(160%);
-  border: 1px solid rgba(255, 255, 255, 0.7);
-  border-radius: 22px;
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.9),
-    inset 0 -1px 0 rgba(0, 50, 120, 0.14),
-    var(--ck-shadow-3);
-}
-
-/* Code / pre blocks — semi-transparent glass too */
-html[data-ck-chrome="frutiger"] pre,
-html[data-ck-chrome="frutiger"] code {
-  background: rgba(255, 255, 255, 0.55) !important;
-  border: 1px solid rgba(255, 255, 255, 0.5);
-  border-radius: 10px;
-  color: var(--ck-text-primary);
-}
-
-/* ---------- Shimmer sweep — opt-in via .ck-frutiger-shimmer.
-   Diagonal white gradient sweeps across the element every few
-   seconds. Apply to "shiny" elements: progress fills, loading
-   pills, the hero CTA. */
-@keyframes ck-frutiger-shimmer {
-  0% { transform: translateX(-150%) skewX(-20deg); }
-  60%, 100% { transform: translateX(250%) skewX(-20deg); }
-}
-.ck-frutiger-shimmer {
-  position: relative;
-  overflow: hidden;
-}
-.ck-frutiger-shimmer::after {
-  content: "";
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background: linear-gradient(110deg,
-    transparent 0%,
-    transparent 35%,
-    rgba(255, 255, 255, 0.55) 50%,
-    transparent 65%,
-    transparent 100%);
-  animation: ck-frutiger-shimmer 3.4s ease-in-out infinite;
-}
-
-/* Slow pulse for the "aero glow" — opt-in via .ck-frutiger-glow */
-@keyframes ck-frutiger-glow-pulse {
-  0%, 100% { box-shadow: 0 0 16px rgba(79, 195, 247, 0.35); }
-  50%      { box-shadow: 0 0 28px rgba(79, 195, 247, 0.65); }
-}
-.ck-frutiger-glow {
-  animation: ck-frutiger-glow-pulse 4.2s ease-in-out infinite;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .ck-frutiger-shimmer::after,
-  .ck-frutiger-glow {
-    animation: none;
-  }
-}