@withpotter/lib 0.13.0-next.101

package/dist/template-types.d.ts

@@ -0,0 +1,317 @@
+/**
+ * Template Types
+ *
+ * Shared type definitions for template configurations.
+ * These types are used by both the API and dashboard.
+ */
+import { type LucideIcon } from 'lucide-react';
+export type FieldType = 'text' | 'textarea' | 'richtext' | 'number' | 'currency' | 'boolean' | 'toggle' | 'image' | 'gallery' | 'select' | 'categorySelect' | 'resourceSelect' | 'contentSelect' | 'planRef' | 'multiselect' | 'tags' | 'date' | 'datetime' | 'time' | 'duration' | 'url' | 'email' | 'phone' | 'color' | 'icon' | 'array' | 'json' | 'relation' | 'component' | 'repeatable';
+export interface SelectOption {
+    label: string;
+    value: string;
+    icon?: string;
+    color?: string;
+}
+export interface ValidationRule {
+    type: 'required' | 'min' | 'max' | 'minLength' | 'maxLength' | 'pattern' | 'custom';
+    value?: number | string;
+    message?: string;
+}
+export interface ContentFieldConfig {
+    name: string;
+    label: string;
+    type: FieldType;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    validations?: ValidationRule[];
+    options?: SelectOption[];
+    min?: number;
+    max?: number;
+    step?: number;
+    prefix?: string;
+    suffix?: string;
+    showIf?: {
+        field: string;
+        equals?: unknown;
+        notEquals?: unknown;
+        in?: unknown[];
+    };
+    width?: 'full' | 'half' | 'third';
+    group?: string;
+    relation?: {
+        endpoint: string;
+        displayField: string;
+        multiple?: boolean;
+    };
+    fields?: ContentFieldConfig[];
+    maxItems?: number;
+    minItems?: number;
+    defaultValue?: unknown;
+}
+export interface FieldGroup {
+    name: string;
+    label: string;
+    description?: string;
+    collapsed?: boolean;
+    fields: string[];
+}
+export interface ListColumnConfig {
+    field: string;
+    label?: string;
+    width?: 'auto' | 'sm' | 'md' | 'lg' | 'xl';
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    type?: 'avatar' | 'image' | 'status' | 'badge' | 'currency' | 'date' | 'datetime' | 'actions' | 'boolean' | string;
+    statusField?: string;
+}
+export interface ListStatConfig {
+    label: string;
+    value: 'count' | 'sum' | 'filter';
+    field?: string;
+    filterValue?: string;
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'danger';
+    icon?: string;
+}
+export interface ListFilterConfig {
+    field: string;
+    label: string;
+    type: 'select' | 'search' | 'date' | 'dateRange' | 'range' | 'content-select';
+    options?: SelectOption[];
+    placeholder?: string;
+    min?: number;
+    max?: number;
+    step?: number;
+    contentType?: string;
+    labelField?: string;
+}
+export interface ListViewConfig {
+    columns: ListColumnConfig[];
+    stats?: ListStatConfig[];
+    filters?: ListFilterConfig[];
+    statusField?: string;
+    statusConfig?: Record<string, {
+        label: string;
+        color: string;
+    }>;
+    defaultSort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    };
+    emptyTitle?: string;
+    emptyDescription?: string;
+    createLabel?: string;
+}
+export interface SettingsFieldConfig {
+    name: string;
+    label: string;
+    type: FieldType;
+    description?: string;
+    placeholder?: string;
+    required?: boolean;
+    default?: unknown;
+    options?: SelectOption[];
+}
+export interface SettingsSection {
+    label: string;
+    description?: string;
+    /**
+     * Optional, because a real `siteSettings` blob has two kinds of section and
+     * only one of them has fields. The other is `type: 'categoryManager'` — a
+     * label, a `contentTypeKey` and a list of `defaults`, edited on
+     * /dashboard/categories rather than as a form. `normalizeSiteSettings` passes
+     * those through deliberately, so anything reading a section must ask whether
+     * it has fields before reaching for them. Declaring the array required did
+     * not make it present; it only stopped the compiler from saying so.
+     */
+    fields?: SettingsFieldConfig[];
+}
+export interface SiteSettingsSchema {
+    brand?: SettingsSection;
+    contact?: SettingsSection;
+    social?: SettingsSection;
+    seo?: SettingsSection;
+    business?: SettingsSection;
+    booking?: SettingsSection;
+    [key: string]: SettingsSection | undefined;
+}
+export interface PageSectionField {
+    name: string;
+    label: string;
+    type: FieldType;
+    required?: boolean;
+    default?: unknown;
+    description?: string;
+    placeholder?: string;
+    options?: SelectOption[];
+    ui?: string;
+    previewText?: string;
+}
+export interface PageSectionItems {
+    fields: PageSectionField[];
+    minItems?: number;
+    maxItems?: number;
+    defaultItems?: Record<string, unknown>[];
+}
+export interface PageSection {
+    id: string;
+    label: string;
+    fields: PageSectionField[];
+    items?: PageSectionItems;
+}
+export interface PageContentSchema {
+    label: string;
+    description?: string;
+    /** When true, the platform provides a fallback page component for templates that don't implement this page natively */
+    platformFallback?: boolean;
+    sections: PageSection[];
+}
+export interface PageContentSchemas {
+    home?: PageContentSchema;
+    about?: PageContentSchema;
+    contact?: PageContentSchema;
+    footer?: PageContentSchema;
+    [key: string]: PageContentSchema | undefined;
+}
+export interface AppearanceFieldConfig {
+    name: string;
+    label: string;
+    type: 'color' | 'font' | 'boolean';
+    default?: string | boolean;
+    description?: string;
+}
+export interface AppearanceSection {
+    label: string;
+    description?: string;
+    fields: AppearanceFieldConfig[];
+}
+export interface AppearanceSchema {
+    colors?: AppearanceSection;
+    fonts?: AppearanceSection;
+    sections?: AppearanceSection;
+    [key: string]: AppearanceSection | undefined;
+}
+export type TemplateCategory = 'food' | 'beauty' | 'wellness' | 'fitness' | 'hospitality' | 'retail' | 'creative' | 'professional' | 'fashion' | 'education' | 'realestate' | 'services' | 'technology' | 'ecommerce';
+export type ContentBehavior = 'sellable' | 'bookable' | 'giftable' | 'subscribable' | 'leadCapture' | 'downloadable' | 'shippable' | 'rentable' | 'ticketed' | 'giftcard' | 'addable' | 'billable' | 'publishable' | 'showcase';
+export type CoreEndpoint = 'packages' | 'bookings' | 'subscriptions' | 'inquiries' | 'testimonials' | 'team' | 'events' | 'orders' | 'customers' | 'products' | 'blog';
+export interface ContentTypeConfigAPI {
+    name: string;
+    singularName: string;
+    description?: string;
+    icon: string;
+    apiEndpoint: CoreEndpoint;
+    contentTypeKey: string;
+    behaviors: ContentBehavior[];
+    bookingModel?: 'time-slot' | 'date-range';
+    excludeGroups?: string[];
+    /** Template-provided label overrides for behavior config panels (Phase 4) */
+    behaviorLabels?: Record<string, {
+        label?: string;
+        subtitle?: string;
+        fields?: Record<string, string>;
+    }>;
+    fields: ContentFieldConfig[];
+    fieldGroups?: FieldGroup[];
+    listFields?: string[];
+    searchFields?: string[];
+    listView?: ListViewConfig;
+    defaultSort?: {
+        field: string;
+        direction: 'asc' | 'desc';
+    };
+}
+export interface ContentTypeConfig extends Omit<ContentTypeConfigAPI, 'icon'> {
+    icon: LucideIcon;
+}
+export interface DashboardModuleAPI {
+    id: string;
+    label: string;
+    path: string;
+    icon: string;
+    description?: string;
+    badge?: string;
+    contentType?: string;
+}
+export interface DashboardModule {
+    id: string;
+    name: string;
+    href: string;
+    icon: LucideIcon;
+    description?: string;
+    badge?: string;
+    contentType?: string;
+}
+export interface TemplateDefaultSettings {
+    primaryColor?: string;
+    accentColor?: string;
+    currency?: string;
+    timezone?: string;
+}
+export interface AnalyticsConfig {
+    primaryMetric?: string;
+    metrics?: string[];
+    dataSources?: string[];
+    charts?: string[];
+    segments?: string[];
+}
+export interface CustomersConfig {
+    industryLabel?: string;
+    trackFrom?: string[];
+    segments?: string[];
+    additionalFields?: string[];
+    engagement?: string[];
+}
+/**
+ * A page the template actually renders, straight off its manifest.
+ *
+ * Not to be confused with `pageContent`, which is the platform's schema — a
+ * fixed base of eighteen pages every template inherits whether it renders them
+ * or not, plus whatever the template adds. Reading that as "the template's
+ * pages" is what offered a restaurant group Membership, Packages and Order
+ * tracking, and hid Private events, which it does have.
+ *
+ * `path` may be dynamic (`/venues/:slug`), which marks a detail template
+ * rather than a page anybody can navigate to on its own.
+ */
+export interface TemplatePage {
+    id: string;
+    name: string;
+    path: string;
+}
+export interface TemplateConfigAPI {
+    id: string;
+    name: string;
+    description: string;
+    category: TemplateCategory;
+    icon: string;
+    previewImage?: string;
+    /** The pages this template really has. Absent on older templates. */
+    pages?: TemplatePage[];
+    siteSettings?: SiteSettingsSchema;
+    pageContent?: PageContentSchemas;
+    appearance?: AppearanceSchema;
+    /**
+     * `false` when the template keeps its own type and ignores the owner's font
+     * choices (top-level `customFonts` in template.json). Absent means the
+     * owner can choose fonts.
+     */
+    customFonts?: boolean;
+    /** Why the template keeps its own type, from `customFontsReason`. */
+    customFontsReason?: string;
+    contentTypes?: Record<string, ContentTypeConfigAPI>;
+    dashboardModules?: DashboardModuleAPI[];
+    behaviors?: ContentBehavior[];
+    defaultSettings?: TemplateDefaultSettings;
+    analyticsConfig?: AnalyticsConfig;
+    customersConfig?: CustomersConfig;
+    isActive: boolean;
+    sortOrder: number;
+    createdAt: string;
+    updatedAt: string;
+}
+export interface TemplateConfig extends Omit<TemplateConfigAPI, 'icon' | 'contentTypes' | 'dashboardModules'> {
+    icon: LucideIcon;
+    contentTypes: Record<string, ContentTypeConfig>;
+    dashboardModules: DashboardModule[];
+    behaviors?: ContentBehavior[];
+}

package/dist/template-types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=template-types.js.map

package/dist/template-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/templates.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @deprecated This file is deprecated and no longer used.
+ *
+ * Template configuration is now loaded from the web app's JSON schemas:
+ *   web/src/templates/{id}/dashboard-schema.json  - Content types, fields, dashboard modules, site settings
+ *   web/src/templates/{id}/manifest.json          - Template metadata (name, category, features, etc.)
+ *
+ * The dashboard fetches templates via:
+ *   1. Registry:  GET {WEB_URL}/templates/registry.json  (lightweight list of all templates)
+ *   2. Schema:    GET {WEB_URL}/api/templates/{id}       (full schema = manifest + dashboard-schema merged)
+ *
+ * All template types are defined in ./template-types.ts
+ * All template loading logic is in ./template-context.tsx
+ *
+ * To add a new template:
+ *   1. Create web/src/templates/{id}/manifest.json
+ *   2. Create web/src/templates/{id}/dashboard-schema.json (with contentTypes, dashboardModules, siteSettings, pageContent)
+ *   3. Register in web/src/lib/templates/registry.ts
+ *   4. Add to VALID_TEMPLATE_IDS in web/src/app/api/templates/[id]/route.ts
+ *   5. No changes needed in the dashboard!
+ */
+export type { TemplateConfig, ContentTypeConfig, ContentFieldConfig, DashboardModule, FieldGroup, FieldType, SelectOption, ValidationRule, ContentBehavior, CoreEndpoint, TemplateCategory, } from './template-types';

package/dist/templates.js

@@ -0,0 +1 @@
+//# sourceMappingURL=templates.js.map

package/dist/templates.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/theme-context.d.ts

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+type Theme = 'light' | 'dark' | 'system';
+type ResolvedTheme = 'light' | 'dark';
+export type ThemeMode = 'dark' | 'light' | 'full-light';
+interface ThemeContextType {
+    theme: Theme;
+    resolvedTheme: ResolvedTheme;
+    /**
+     * The desktop dashboard's content card should be light. The page root stays
+     * dark there, so the sidebar and everything that opens over the page do too;
+     * see `rootThemeFor`.
+     */
+    shellLight: boolean;
+    /**
+     * The three looks of the desktop dashboard: all dark; a light card on a dark
+     * frame; and everything light. `cycleThemeMode` steps through them.
+     */
+    themeMode: ThemeMode;
+    cycleThemeMode: () => void;
+    /** Go straight to one of the three looks. */
+    setThemeMode: (mode: ThemeMode) => void;
+    setTheme: (theme: Theme) => void;
+    toggleTheme: () => void;
+}
+export declare function ThemeProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function useTheme(): ThemeContextType;
+export declare function ThemeSegmented({ className }?: {
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * Theme toggle. By default a bare icon button, as before.
+ *
+ * `hint` says what the button is for, because an icon alone was not found:
+ * - 'label'   — the words sit beside the icon, always visible. Use where there is room.
+ * - 'tooltip' — the words appear under the button on hover, keyboard focus, and
+ *               after a tap. Use in a tight icon row.
+ */
+export declare function ThemeToggle({ className, hint, }: {
+    className?: string;
+    hint?: 'none' | 'label' | 'tooltip';
+}): import("react").JSX.Element;
+/**
+ * Whether the desktop dashboard's content card is light, for anything that
+ * needs to follow it. Unlike `useTheme` it does not throw outside the provider
+ * (a popup rendered somewhere the provider does not reach): it says false.
+ */
+export declare function useShellLight(): boolean;
+/**
+ * The class that makes a popup light while the desktop card is. Menus, selects
+ * and panels mount on the body, outside the card, so they would otherwise
+ * inherit the dark root and float over a white page as dark boxes. Dialogs,
+ * menus and toasts are also covered by one rule in globals.css keyed on the
+ * root, so this is for the popups that style themselves.
+ */
+export declare function useLightSurface(): string;
+export {};

package/dist/theme-context.js

@@ -0,0 +1,283 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+  useCallback
+} from "react";
+import { Sun, Moon, Monitor } from "lucide-react";
+import { usePathname } from "@withpotter/lib/use-pathname";
+import {
+  DESKTOP_QUERY,
+  LIGHT_SURFACE,
+  isDesktopWindow,
+  rootThemeFor,
+  shellLightFor,
+  themeForPath
+} from "./theme-policy";
+import { ViewSwitch } from "@withpotter/ui-kit/view-switch";
+const ThemeContext = createContext(void 0);
+const STORAGE_KEY = "potter-theme";
+const FRAME_KEY = "potter-theme-frame";
+const DEFAULT_THEME = (() => {
+  const v = (process.env.NEXT_PUBLIC_BOX_DEFAULT_THEME ?? "").toLowerCase();
+  return v === "light" || v === "dark" || v === "system" ? v : "dark";
+})();
+function getSystemTheme() {
+  if (typeof window === "undefined") return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function withoutTransitions(change) {
+  const style = document.createElement("style");
+  style.textContent = "*,*::before,*::after{transition:none !important;animation-duration:0s !important}";
+  document.head.appendChild(style);
+  change();
+  void window.getComputedStyle(document.documentElement).opacity;
+  requestAnimationFrame(() => requestAnimationFrame(() => style.remove()));
+}
+function ThemeProvider({ children }) {
+  const pathname = usePathname();
+  const [theme, setThemeState] = useState("dark");
+  const [resolvedTheme, setResolvedTheme] = useState("dark");
+  const [mounted, setMounted] = useState(false);
+  const [desktop, setDesktop] = useState(false);
+  const desktopRef = useRef(false);
+  const [frameLight, setFrameLight] = useState(false);
+  const frameLightRef = useRef(false);
+  const applyTheme = useCallback((resolved) => {
+    const root = document.documentElement;
+    const applied = rootThemeFor(
+      resolved,
+      window.location.pathname,
+      desktopRef.current,
+      frameLightRef.current
+    );
+    root.classList.remove("light", "dark");
+    root.classList.add(applied);
+    root.style.colorScheme = applied;
+    if (shellLightFor(
+      resolved,
+      window.location.pathname,
+      desktopRef.current,
+      frameLightRef.current
+    )) {
+      root.dataset.shellLight = "true";
+    } else {
+      delete root.dataset.shellLight;
+    }
+  }, []);
+  const setTheme = useCallback(
+    (newTheme) => {
+      setThemeState(newTheme);
+      localStorage.setItem(STORAGE_KEY, newTheme);
+      const resolved = themeForPath(newTheme, getSystemTheme(), pathname);
+      applyTheme(resolved);
+      setResolvedTheme(resolved);
+    },
+    [applyTheme, pathname]
+  );
+  const toggleTheme = useCallback(() => {
+    const newTheme = resolvedTheme === "light" ? "dark" : "light";
+    setTheme(newTheme);
+  }, [resolvedTheme, setTheme]);
+  const themeMode = resolvedTheme === "dark" ? "dark" : frameLight ? "full-light" : "light";
+  const setThemeMode = useCallback(
+    (next) => {
+      withoutTransitions(() => {
+        const frame = next === "full-light";
+        frameLightRef.current = frame;
+        setFrameLight(frame);
+        localStorage.setItem(FRAME_KEY, frame ? "light" : "dark");
+        setTheme(next === "dark" ? "dark" : "light");
+      });
+    },
+    [setTheme]
+  );
+  const cycleThemeMode = useCallback(() => {
+    setThemeMode(
+      themeMode === "dark" ? "light" : themeMode === "light" ? "full-light" : "dark"
+    );
+  }, [themeMode, setThemeMode]);
+  useEffect(() => {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    const initialTheme = stored ?? DEFAULT_THEME;
+    const path = window.location.pathname;
+    frameLightRef.current = localStorage.getItem(FRAME_KEY) === "light";
+    desktopRef.current = isDesktopWindow(
+      window.matchMedia(DESKTOP_QUERY).matches,
+      window.self !== window.top
+    );
+    const resolvedInitialTheme = themeForPath(
+      initialTheme,
+      getSystemTheme(),
+      path
+    );
+    applyTheme(resolvedInitialTheme);
+    queueMicrotask(() => {
+      setThemeState(initialTheme);
+      setResolvedTheme(resolvedInitialTheme);
+      setDesktop(desktopRef.current);
+      setFrameLight(frameLightRef.current);
+      setMounted(true);
+    });
+  }, [applyTheme]);
+  useEffect(() => {
+    const query = window.matchMedia(DESKTOP_QUERY);
+    const onChange = (event) => {
+      const isDesktop = isDesktopWindow(
+        event.matches,
+        window.self !== window.top
+      );
+      desktopRef.current = isDesktop;
+      setDesktop(isDesktop);
+      applyTheme(themeForPath(theme, getSystemTheme(), pathname));
+    };
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [theme, pathname, applyTheme]);
+  useEffect(() => {
+    if (!mounted) return;
+    const resolved = themeForPath(theme, getSystemTheme(), pathname);
+    applyTheme(resolved);
+    let active = true;
+    queueMicrotask(() => {
+      if (active) setResolvedTheme(resolved);
+    });
+    return () => {
+      active = false;
+    };
+  }, [mounted, theme, pathname, applyTheme]);
+  useEffect(() => {
+    if (theme !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      const resolved = themeForPath(theme, getSystemTheme(), pathname);
+      applyTheme(resolved);
+      setResolvedTheme(resolved);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [theme, pathname, applyTheme]);
+  return /* @__PURE__ */ jsx(
+    ThemeContext.Provider,
+    {
+      value: {
+        theme,
+        resolvedTheme,
+        shellLight: mounted && shellLightFor(resolvedTheme, pathname, desktop, frameLight),
+        themeMode,
+        cycleThemeMode,
+        setThemeMode,
+        setTheme,
+        toggleTheme
+      },
+      children: /* @__PURE__ */ jsx("div", { style: mounted ? void 0 : { visibility: "hidden" }, children })
+    }
+  );
+}
+function useTheme() {
+  const context = useContext(ThemeContext);
+  if (context === void 0) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+}
+const THEME_SEGMENTS = [
+  { value: "light", label: "Light", icon: Sun },
+  { value: "dark", label: "Dark", icon: Moon },
+  { value: "system", label: "System", icon: Monitor }
+];
+function ThemeSegmented({ className } = {}) {
+  const { theme, setTheme } = useTheme();
+  return /* @__PURE__ */ jsx(
+    ViewSwitch,
+    {
+      options: THEME_SEGMENTS,
+      value: theme,
+      onChange: setTheme,
+      size: "comfortable",
+      "aria-label": "Theme",
+      className
+    }
+  );
+}
+const THEME_HINT = "Light or dark theme";
+function ThemeToggle({
+  className = "",
+  hint = "none"
+}) {
+  const { resolvedTheme, toggleTheme } = useTheme();
+  const button = /* @__PURE__ */ jsx(
+    ThemeToggleButton,
+    {
+      className,
+      resolvedTheme,
+      onToggle: toggleTheme,
+      showLabel: hint === "label"
+    }
+  );
+  if (hint !== "tooltip") return button;
+  return /* @__PURE__ */ jsxs("span", { className: "group relative inline-flex", children: [
+    button,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute right-0 top-full z-50 mt-1 hidden whitespace-nowrap rounded-md border border-[var(--border-default)] bg-[var(--bg-base)] px-2 py-1 text-xs text-[var(--text-secondary)] group-hover:block group-focus-within:block",
+        children: THEME_HINT
+      }
+    )
+  ] });
+}
+function ThemeToggleButton({
+  className,
+  resolvedTheme,
+  onToggle,
+  showLabel
+}) {
+  const next = resolvedTheme === "light" ? "dark" : "light";
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: onToggle,
+      className: `
+        ${showLabel ? "inline-flex items-center gap-2 text-sm" : ""}
+        p-2 rounded-md transition-colors
+        text-[var(--text-tertiary)] hover:text-[var(--text-secondary)] hover:bg-[var(--interactive-active)]
+        dark:text-[var(--text-muted)] dark:hover:text-[var(--text-secondary)] dark:hover:bg-[var(--text-primary)]
+        ${className}
+      `,
+      "aria-label": showLabel ? `${THEME_HINT}: switch to ${next}` : `Switch to ${next} mode`,
+      children: [
+        resolvedTheme === "dark" ? /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx(
+          "path",
+          {
+            fillRule: "evenodd",
+            d: "M10 2a1 1 0 011 1v1a1 1 0 11-2 0V3a1 1 0 011-1zm4 8a4 4 0 11-8 0 4 4 0 018 0zm-.464 4.95l.707.707a1 1 0 001.414-1.414l-.707-.707a1 1 0 00-1.414 1.414zm2.12-10.607a1 1 0 010 1.414l-.706.707a1 1 0 11-1.414-1.414l.707-.707a1 1 0 011.414 0zM17 11a1 1 0 100-2h-1a1 1 0 100 2h1zm-7 4a1 1 0 011 1v1a1 1 0 11-2 0v-1a1 1 0 011-1zM5.05 6.464A1 1 0 106.465 5.05l-.708-.707a1 1 0 00-1.414 1.414l.707.707zm1.414 8.486l-.707.707a1 1 0 01-1.414-1.414l.707-.707a1 1 0 011.414 1.414zM4 11a1 1 0 100-2H3a1 1 0 000 2h1z",
+            clipRule: "evenodd"
+          }
+        ) }) : /* @__PURE__ */ jsx("svg", { className: "w-5 h-5", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ jsx("path", { d: "M17.293 13.293A8 8 0 016.707 2.707a8.001 8.001 0 1010.586 10.586z" }) }),
+        showLabel && /* @__PURE__ */ jsx("span", { children: THEME_HINT })
+      ]
+    }
+  );
+}
+function useShellLight() {
+  return useContext(ThemeContext)?.shellLight ?? false;
+}
+function useLightSurface() {
+  return useShellLight() ? LIGHT_SURFACE : "";
+}
+export {
+  ThemeProvider,
+  ThemeSegmented,
+  ThemeToggle,
+  useLightSurface,
+  useShellLight,
+  useTheme
+};
+//# sourceMappingURL=theme-context.js.map