@the-portland-company/shell 0.1.0

package/dist/index.js

@@ -0,0 +1,1331 @@
+import { extendTheme, Tooltip, ChakraProvider, Flex, Heading, Spacer, Box, Menu, MenuButton, Avatar, MenuList, MenuItem, VStack, Link as Link$1, Text } from '@chakra-ui/react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx2 from 'clsx';
+import { Link, useLocation } from 'react-router-dom';
+import { createContext, useEffect, useState, useMemo, useContext } from 'react';
+
+// src/theme/index.ts
+
+// src/theme/colors.ts
+var colors = {
+  // Primary brand color - Politogy Red/Orange (Energy & Action)
+  brand: {
+    50: "#fff5f0",
+    100: "#ffe8dc",
+    200: "#ffd0b8",
+    300: "#ffb088",
+    400: "#ff8c5a",
+    500: "#e86a3a",
+    // Primary brand color - burnt orange/red
+    600: "#cc5429",
+    700: "#a6421f",
+    800: "#803317",
+    900: "#5c2410"
+  },
+  // Politogy Brand Colors
+  politogy: {
+    // Legacy Blue - kept for reference
+    blue: {
+      50: "#e8f4fd",
+      100: "#bee3f8",
+      200: "#90cdf4",
+      300: "#63b3ed",
+      400: "#4299e1",
+      500: "#3182ce",
+      600: "#2b6cb0",
+      700: "#2c5282",
+      800: "#2a4365",
+      900: "#1a365d"
+    },
+    // Primary Red/Orange - Energy & Action (main brand color)
+    red: {
+      50: "#fff5f0",
+      100: "#ffe8dc",
+      200: "#ffd0b8",
+      300: "#ffb088",
+      400: "#ff8c5a",
+      500: "#e86a3a",
+      600: "#cc5429",
+      700: "#a6421f",
+      800: "#803317",
+      900: "#5c2410"
+    },
+    // Navy - Professional & Authoritative
+    navy: {
+      50: "#e8eef6",
+      100: "#c5d4e8",
+      200: "#9fb8d9",
+      300: "#789cca",
+      400: "#5b86be",
+      500: "#3e70b2",
+      600: "#325a8e",
+      700: "#26446a",
+      800: "#1a2e47",
+      900: "#0e1823"
+    },
+    // White & Off-white
+    white: "#ffffff",
+    offWhite: "#f8fafc",
+    // Text colors
+    text: {
+      primary: "#1a202c",
+      secondary: "#4a5568",
+      muted: "#718096",
+      light: "#a0aec0"
+    }
+  },
+  // Semantic color tokens that will switch based on color mode
+  gray: {
+    50: "#f7fafc",
+    100: "#edf2f7",
+    200: "#e2e8f0",
+    300: "#cbd5e0",
+    400: "#a0aec0",
+    500: "#718096",
+    600: "#4a5568",
+    700: "#2d3748",
+    800: "#1a202c",
+    900: "#171923"
+  }
+};
+var semanticTokens = {
+  colors: {
+    // Text colors
+    "text.primary": {
+      default: "gray.900",
+      _dark: "gray.50"
+    },
+    "text.secondary": {
+      default: "gray.600",
+      _dark: "gray.400"
+    },
+    "text.muted": {
+      default: "gray.500",
+      _dark: "gray.500"
+    },
+    // Background colors
+    "bg.primary": {
+      default: "white",
+      _dark: "gray.800"
+    },
+    "bg.secondary": {
+      default: "gray.50",
+      _dark: "gray.900"
+    },
+    "bg.surface": {
+      default: "white",
+      _dark: "gray.700"
+    },
+    "bg.hover": {
+      default: "gray.50",
+      _dark: "gray.600"
+    },
+    // Border colors
+    "border.default": {
+      default: "gray.200",
+      _dark: "gray.600"
+    },
+    "border.muted": {
+      default: "gray.100",
+      _dark: "gray.700"
+    },
+    // Component specific
+    "card.bg": {
+      default: "white",
+      _dark: "gray.700"
+    },
+    "card.border": {
+      default: "gray.200",
+      _dark: "gray.600"
+    },
+    "input.bg": {
+      default: "white",
+      _dark: "gray.700"
+    },
+    "input.border": {
+      default: "gray.200",
+      _dark: "gray.600"
+    },
+    "input.hover": {
+      default: "gray.400",
+      _dark: "gray.500"
+    },
+    // Navigation
+    "nav.bg": {
+      default: "white",
+      _dark: "gray.800"
+    },
+    "nav.border": {
+      default: "gray.200",
+      _dark: "gray.700"
+    },
+    // Sidebar
+    "sidebar.bg": {
+      default: "gray.50",
+      _dark: "gray.900"
+    },
+    "sidebar.hover": {
+      default: "gray.100",
+      _dark: "gray.800"
+    },
+    "sidebar.active": {
+      default: "brand.50",
+      _dark: "brand.900"
+    },
+    // Status colors
+    "success.bg": {
+      default: "green.50",
+      _dark: "green.900"
+    },
+    "error.bg": {
+      default: "red.50",
+      _dark: "red.900"
+    },
+    "warning.bg": {
+      default: "yellow.50",
+      _dark: "yellow.900"
+    },
+    "info.bg": {
+      default: "blue.50",
+      _dark: "blue.900"
+    }
+  }
+};
+
+// src/theme/components.ts
+var components = {
+  Button: {
+    baseStyle: {
+      fontWeight: "medium"
+    },
+    defaultProps: {
+      colorScheme: "brand"
+    },
+    variants: {
+      primary: {
+        bg: "brand.500",
+        color: "white",
+        _hover: {
+          bg: "brand.600",
+          _disabled: {
+            bg: "brand.500"
+          }
+        },
+        _active: {
+          bg: "brand.700"
+        }
+      },
+      secondary: {
+        borderWidth: "1px",
+        borderColor: "gray.300",
+        bg: "white",
+        color: "gray.700",
+        _hover: {
+          bg: "gray.50"
+        }
+      },
+      solid: (props) => {
+        const { colorScheme: c } = props;
+        if (c === "brand") {
+          return {
+            bg: "brand.500",
+            color: "white",
+            _hover: {
+              bg: "brand.600",
+              _disabled: {
+                bg: "brand.500"
+              }
+            },
+            _active: {
+              bg: "brand.700"
+            }
+          };
+        }
+        return {
+          bg: `${c}.500`,
+          color: "white",
+          _hover: {
+            bg: `${c}.600`,
+            _disabled: {
+              bg: `${c}.500`
+            }
+          },
+          _active: {
+            bg: `${c}.700`
+          }
+        };
+      },
+      ghost: (props) => {
+        const { colorScheme: c } = props;
+        return {
+          color: `${c}.600`,
+          _hover: {
+            bg: `${c}.50`
+          }
+        };
+      },
+      outline: (props) => {
+        const { colorScheme: c } = props;
+        return {
+          borderColor: `${c}.500`,
+          color: `${c}.600`,
+          _hover: {
+            bg: `${c}.50`
+          }
+        };
+      },
+      link: {
+        color: "brand.500",
+        _hover: {
+          color: "brand.600",
+          textDecoration: "underline"
+        }
+      }
+    }
+  },
+  Heading: {
+    baseStyle: {
+      color: "politogy.navy.800",
+      fontWeight: "semibold"
+    }
+  },
+  Card: {
+    baseStyle: {
+      container: {
+        bg: "card.bg",
+        borderWidth: "1px",
+        borderColor: "card.border",
+        borderRadius: "lg"
+      }
+    }
+  },
+  Input: {
+    baseStyle: {
+      field: {
+        bg: "input.bg",
+        borderColor: "var(--mode-input-border-color)",
+        _hover: {
+          borderColor: "var(--mode-input-hover-border-color)"
+        },
+        _focus: {
+          borderColor: "var(--mode-primary-color)",
+          boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+        }
+      }
+    },
+    defaultProps: {
+      variant: "outline"
+    },
+    variants: {
+      outline: {
+        field: {
+          borderColor: "var(--mode-input-border-color)",
+          _hover: {
+            borderColor: "var(--mode-input-hover-border-color)"
+          },
+          _focus: {
+            borderColor: "var(--mode-primary-color)",
+            boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+          }
+        }
+      }
+    }
+  },
+  NumberInput: {
+    defaultProps: {
+      variant: "outline"
+    },
+    variants: {
+      outline: {
+        field: {
+          borderColor: "var(--mode-input-border-color)",
+          _hover: {
+            borderColor: "var(--mode-input-hover-border-color)"
+          },
+          _focus: {
+            borderColor: "var(--mode-primary-color)",
+            boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+          }
+        }
+      }
+    }
+  },
+  Select: {
+    baseStyle: {
+      field: {
+        bg: "input.bg",
+        borderColor: "var(--mode-input-border-color)",
+        _hover: {
+          borderColor: "var(--mode-input-hover-border-color)"
+        },
+        _focus: {
+          borderColor: "var(--mode-primary-color)",
+          boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+        }
+      }
+    },
+    defaultProps: {
+      variant: "outline"
+    },
+    variants: {
+      outline: {
+        field: {
+          borderColor: "var(--mode-input-border-color)",
+          _hover: {
+            borderColor: "var(--mode-input-hover-border-color)"
+          },
+          _focus: {
+            borderColor: "var(--mode-primary-color)",
+            boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+          }
+        }
+      }
+    }
+  },
+  Textarea: {
+    baseStyle: {
+      bg: "input.bg",
+      borderColor: "var(--mode-input-border-color)",
+      _hover: {
+        borderColor: "var(--mode-input-hover-border-color)"
+      },
+      _focus: {
+        borderColor: "var(--mode-primary-color)",
+        boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+      }
+    },
+    defaultProps: {
+      variant: "outline"
+    },
+    variants: {
+      outline: {
+        borderColor: "var(--mode-input-border-color)",
+        _hover: {
+          borderColor: "var(--mode-input-hover-border-color)"
+        },
+        _focus: {
+          borderColor: "var(--mode-primary-color)",
+          boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+        }
+      }
+    }
+  },
+  Menu: {
+    baseStyle: {
+      list: {
+        bg: "bg.surface",
+        borderColor: "var(--mode-input-border-color)",
+        boxShadow: "lg"
+      },
+      item: {
+        bg: "transparent",
+        _hover: {
+          bg: "bg.hover"
+        },
+        _focus: {
+          bg: "bg.hover"
+        }
+      }
+    }
+  },
+  Modal: {
+    baseStyle: {
+      dialog: {
+        bg: "bg.surface"
+      },
+      overlay: {
+        bg: "blackAlpha.600"
+      }
+    }
+  },
+  Popover: {
+    baseStyle: {
+      content: {
+        bg: "bg.surface",
+        borderColor: "border.default",
+        boxShadow: "lg"
+      }
+    }
+  },
+  Drawer: {
+    baseStyle: {
+      dialog: {
+        bg: "bg.surface"
+      },
+      overlay: {
+        bg: "blackAlpha.600"
+      }
+    }
+  },
+  Tabs: {
+    baseStyle: {
+      root: {
+        width: "100%"
+      },
+      tablist: {
+        width: "100%",
+        alignItems: "flex-end",
+        gap: "var(--app-tab-gap)"
+      },
+      tabpanels: {
+        width: "100%"
+      },
+      tabpanel: {
+        width: "100%"
+      },
+      tab: {
+        minHeight: "var(--app-tab-height)",
+        height: "var(--app-tab-height)",
+        lineHeight: 1,
+        borderTopLeftRadius: "var(--app-tab-radius)",
+        borderTopRightRadius: "var(--app-tab-radius)",
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        color: "text.secondary",
+        _selected: {
+          color: "white",
+          bg: "brand.500",
+          borderColor: "brand.500",
+          fontWeight: "semibold"
+        },
+        _hover: {
+          bg: "gray.100"
+        }
+      }
+    },
+    variants: {
+      enclosed: {
+        tab: {
+          color: "gray.600",
+          bg: "transparent",
+          borderColor: "gray.200",
+          _selected: {
+            color: "white",
+            bg: "brand.500",
+            borderColor: "brand.500",
+            borderBottomColor: "brand.500"
+          },
+          _hover: {
+            bg: "gray.100"
+          }
+        }
+      },
+      "enclosed-colored": {
+        tab: {
+          color: "gray.600",
+          _selected: {
+            color: "white",
+            bg: "brand.500"
+          }
+        }
+      },
+      "soft-rounded": {
+        tab: {
+          color: "gray.600",
+          _selected: {
+            color: "white",
+            bg: "brand.500"
+          }
+        }
+      },
+      "solid-rounded": {
+        tab: {
+          color: "gray.600",
+          _selected: {
+            color: "white",
+            bg: "brand.500"
+          }
+        }
+      },
+      line: {
+        tab: {
+          color: "gray.600",
+          _selected: {
+            color: "white",
+            bg: "brand.500",
+            borderColor: "brand.500"
+          },
+          _hover: {
+            bg: "gray.100"
+          }
+        }
+      },
+      unstyled: {
+        tab: {
+          // Allow inline styles to take precedence for unstyled variant
+        }
+      }
+    },
+    defaultProps: {
+      colorScheme: "brand"
+    }
+  },
+  Badge: {
+    baseStyle: {
+      borderRadius: "md",
+      px: 2,
+      py: 1,
+      fontWeight: "medium"
+    },
+    defaultProps: {
+      colorScheme: "brand"
+    }
+  },
+  Link: {
+    baseStyle: {
+      color: "brand.500",
+      _hover: {
+        color: "brand.600",
+        textDecoration: "underline"
+      }
+    }
+  },
+  Alert: {
+    baseStyle: {
+      container: {
+        borderRadius: "md"
+      }
+    },
+    variants: {
+      subtle: (props) => {
+        const { colorScheme: c } = props;
+        if (c === "blue" || c === "info") {
+          return {
+            container: {
+              bg: "blue.50"
+            },
+            icon: {
+              color: "blue.500"
+            },
+            title: {
+              color: "blue.800"
+            },
+            description: {
+              color: "blue.700"
+            }
+          };
+        }
+        return {};
+      },
+      "left-accent": (props) => {
+        const { colorScheme: c } = props;
+        if (c === "blue" || c === "info") {
+          return {
+            container: {
+              bg: "blue.50",
+              borderLeftColor: "blue.500"
+            },
+            icon: {
+              color: "blue.500"
+            }
+          };
+        }
+        return {};
+      },
+      solid: (props) => {
+        const { colorScheme: c } = props;
+        if (c === "blue" || c === "info") {
+          return {
+            container: {
+              bg: "blue.500",
+              color: "white"
+            }
+          };
+        }
+        return {};
+      }
+    }
+  },
+  Table: {
+    baseStyle: {
+      table: {
+        width: "100%",
+        borderCollapse: "collapse",
+        borderSpacing: "0",
+        borderColor: "gray.200"
+      },
+      th: {
+        borderColor: "gray.200",
+        borderBottom: "none",
+        bg: "gray.200",
+        color: "text.secondary",
+        fontWeight: "semibold",
+        px: 3,
+        py: 2.5,
+        minHeight: "44px",
+        height: "44px",
+        verticalAlign: "middle"
+      },
+      td: {
+        borderColor: "gray.200",
+        borderBottom: "none",
+        px: 3,
+        py: 2.5,
+        minHeight: "44px",
+        height: "44px",
+        verticalAlign: "middle"
+      },
+      tr: {
+        borderBottom: "none",
+        borderColor: "transparent",
+        _odd: {
+          bg: "white"
+        },
+        _even: {
+          bg: "gray.50"
+        },
+        _hover: {
+          bg: "gray.100"
+        }
+      },
+      tbody: {
+        tr: {
+          _odd: {
+            bg: "white"
+          },
+          _even: {
+            bg: "gray.50"
+          },
+          _hover: {
+            bg: "blue.100"
+          }
+        }
+      }
+    },
+    variants: {
+      simple: {},
+      striped: {}
+    },
+    defaultProps: {
+      variant: "striped"
+    }
+  },
+  Divider: {
+    baseStyle: {
+      borderColor: "border.default"
+    }
+  }
+};
+
+// src/theme/index.ts
+var config = {
+  initialColorMode: "light",
+  // Always use light theme
+  useSystemColorMode: false
+  // Disable system color mode detection
+};
+var styles = {
+  global: () => ({
+    body: {
+      bg: "white",
+      color: "gray.900"
+    },
+    ":root": {
+      "--mode-primary-color": "var(--app-color-brand-500)",
+      "--mode-input-border-color": "var(--app-color-brand-500)",
+      "--mode-input-hover-border-color": "var(--app-color-brand-600)",
+      "--mode-input-focus-shadow-color": "var(--app-color-brand-500)"
+    },
+    // Ensure non-Chakra/native text-like inputs follow mode border colors as well.
+    'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]), textarea, select': {
+      borderColor: "var(--mode-input-border-color)"
+    },
+    'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):hover, textarea:hover, select:hover': {
+      borderColor: "var(--mode-input-hover-border-color)"
+    },
+    'input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]):focus, textarea:focus, select:focus': {
+      borderColor: "var(--mode-primary-color)",
+      boxShadow: "0 0 0 1px var(--mode-input-focus-shadow-color)"
+    }
+  })
+};
+var fonts = {
+  heading: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+  body: '-apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif',
+  mono: 'SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace'
+};
+var politogyTheme = extendTheme({
+  config,
+  colors,
+  semanticTokens,
+  components,
+  styles,
+  fonts,
+  // Additional theme configurations
+  shadows: {
+    outline: "0 0 0 3px var(--app-color-brand-500)"
+  },
+  radii: {
+    none: "0",
+    sm: "0.125rem",
+    base: "0.25rem",
+    md: "0.375rem",
+    lg: "0.5rem",
+    xl: "0.75rem",
+    "2xl": "1rem",
+    "3xl": "1.5rem",
+    full: "9999px"
+  }
+});
+function Card({
+  title,
+  children,
+  minH,
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `rounded-lg border border-slate-200 bg-white p-6 shadow-sm ${className || ""}`,
+      style: { minHeight: minH, ...style },
+      ...props,
+      children: [
+        title && /* @__PURE__ */ jsx("h3", { className: "mb-4 text-lg font-semibold", children: title }),
+        children
+      ]
+    }
+  );
+}
+function PageContainer({
+  children,
+  maxW = "container.xl",
+  px,
+  py,
+  lockHeight = true
+}) {
+  const isFullWidth = maxW === "full";
+  const effectivePx = isFullWidth ? 0 : px === void 0 ? 4 : Number(px);
+  const effectivePy = py === void 0 ? isFullWidth ? 0 : 4 : py;
+  const pxValue = String(effectivePx);
+  const pyValue = String(effectivePy);
+  const maxWClass = isFullWidth ? "max-w-none" : maxW === "container.xl" ? "max-w-7xl" : maxW === "container.lg" ? "max-w-6xl" : maxW === "container.md" ? "max-w-5xl" : typeof maxW === "string" && /^(\d+)px$/.test(maxW) ? "" : "max-w-7xl";
+  const pxClass = pxValue === "0" ? "px-0" : pxValue === "1" ? "px-1" : pxValue === "2" ? "px-2" : pxValue === "3" ? "px-3" : pxValue === "4" ? "px-4" : "px-4";
+  const pyClass = pyValue === "0" ? "py-0" : pyValue === "4" ? "py-4" : pyValue === "5" ? "py-5" : pyValue === "6" ? "py-6" : "py-6";
+  const inlineMaxWStyle = typeof maxW === "string" && /^(\d+)px$/.test(maxW) ? { maxWidth: maxW } : void 0;
+  return /* @__PURE__ */ jsx(
+    "main",
+    {
+      className: lockHeight ? "h-[calc(100vh-80px)] min-h-[calc(100vh-80px)]" : "",
+      style: { background: "var(--app-tab-content-bg)" },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: clsx2(
+            "mx-auto w-full",
+            maxWClass,
+            pxClass,
+            pyClass,
+            lockHeight ? "h-full" : "h-auto"
+          ),
+          style: inlineMaxWStyle,
+          children
+        }
+      )
+    }
+  );
+}
+var resolveMaxWidthClass = (maxW) => {
+  if (maxW === "full") return "max-w-none";
+  if (maxW === "container.lg") return "max-w-6xl";
+  if (maxW === "container.md") return "max-w-5xl";
+  return "max-w-7xl";
+};
+function PageHeader({
+  title,
+  breadcrumbs = [],
+  actions = null,
+  tabBar = null,
+  maxW = "full",
+  hideSidebar = false
+}) {
+  const maxWClass = resolveMaxWidthClass(maxW);
+  const titleText = typeof title === "string" ? title.trim() : "";
+  const normalizedTitle = titleText.toLowerCase();
+  const breadcrumbsWithoutCurrent = [...breadcrumbs];
+  const last = breadcrumbsWithoutCurrent[breadcrumbsWithoutCurrent.length - 1];
+  if (breadcrumbsWithoutCurrent.length > 1 && normalizedTitle && last && last.label.trim().toLowerCase() === normalizedTitle) {
+    breadcrumbsWithoutCurrent.pop();
+  }
+  if (!title && breadcrumbsWithoutCurrent.length === 0 && !actions && !tabBar) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
+      className: clsx2("text-slate-100", tabBar ? "pt-3 pb-0" : "py-3 border-b border-gray-200", {
+        "md:ml-60": !hideSidebar
+      }),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: clsx2("w-full px-4", maxWClass), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-nowrap items-start justify-between gap-4", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title ? /* @__PURE__ */ jsx("div", { className: "min-w-0", children: /* @__PURE__ */ jsx("div", { className: "truncate text-lg font-semibold text-white", children: title }) }) : null,
+            breadcrumbsWithoutCurrent.length > 0 ? /* @__PURE__ */ jsx(
+              "nav",
+              {
+                "aria-label": "Breadcrumb",
+                className: clsx2("min-w-0 text-slate-100", title ? "mt-1" : ""),
+                children: /* @__PURE__ */ jsx("ol", { className: "flex flex-nowrap items-center gap-2 overflow-hidden text-sm text-gray-600", children: breadcrumbsWithoutCurrent.map((item, index) => /* @__PURE__ */ jsxs(
+                  "li",
+                  {
+                    className: "flex min-w-0 flex-shrink-0 items-center gap-2",
+                    children: [
+                      index > 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: ">" }) : null,
+                      item.href ? /* @__PURE__ */ jsx(Link, { to: item.href, className: "truncate text-slate-100 hover:underline", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "truncate text-slate-100", children: item.label })
+                    ]
+                  },
+                  `${item.label}-${index}`
+                )) })
+              }
+            ) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "flex-shrink-0", children: actions }) : null
+        ] }) }),
+        tabBar ? /* @__PURE__ */ jsx("div", { className: "m-0 w-full px-0", style: { backgroundColor: "transparent" }, children: tabBar }) : null
+      ]
+    }
+  );
+}
+function BreadcrumbBar({
+  breadcrumbs = [],
+  actions = null,
+  maxW = "full"
+}) {
+  if ((!breadcrumbs || breadcrumbs.length === 0) && !actions) {
+    return null;
+  }
+  const maxWClass = maxW === "full" ? "max-w-none" : maxW === "container.xl" ? "max-w-7xl" : maxW === "container.lg" ? "max-w-6xl" : maxW === "container.md" ? "max-w-5xl" : "max-w-7xl";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "ml-0 border-b border-gray-200 px-4 py-3 md:ml-60",
+      style: { backgroundColor: "var(--app-tab-header-bg, #888888)" },
+      children: /* @__PURE__ */ jsx("div", { className: clsx2("mx-auto w-full px-0", maxWClass), children: /* @__PURE__ */ jsxs("div", { className: "flex w-full items-center justify-between", children: [
+        breadcrumbs && breadcrumbs.length > 0 && /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", children: /* @__PURE__ */ jsx("ol", { className: "flex items-center gap-2 text-sm text-slate-100", children: breadcrumbs.map((item, index) => /* @__PURE__ */ jsxs("li", { className: "flex items-center gap-2", children: [
+          index > 0 ? /* @__PURE__ */ jsx("span", { className: "text-gray-400", children: ">" }) : null,
+          item.href ? /* @__PURE__ */ jsx(Link, { to: item.href, className: "text-slate-100 hover:underline", children: item.label }) : /* @__PURE__ */ jsx("span", { className: "text-slate-100", children: item.label })
+        ] }, index)) }) }),
+        actions && /* @__PURE__ */ jsx("div", { children: actions })
+      ] }) })
+    }
+  );
+}
+function HeaderTabBar({
+  items,
+  activeId,
+  onChange,
+  className,
+  ariaLabel = "Tabs"
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": ariaLabel,
+      className: clsx2(
+        // Header-wide tab strip: background + bottom border only (no outer box).
+        "app-header-tab-bar m-0 flex w-full bg-slate-100 p-0",
+        "border-b border-slate-200",
+        className
+      ),
+      children: items.map((item, idx) => {
+        const isActive = item.id === activeId;
+        const isDisabled = Boolean(item.disabled);
+        return /* @__PURE__ */ jsx(
+          Tooltip,
+          {
+            label: item.label,
+            placement: "top",
+            hasArrow: true,
+            bg: "black",
+            color: "white",
+            isDisabled,
+            children: /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                role: "tab",
+                "aria-selected": isActive,
+                "aria-label": item.label,
+                disabled: isDisabled,
+                onClick: () => onChange(item.id),
+                className: clsx2(
+                  "app-header-tab-button relative inline-flex flex-1 items-center justify-center",
+                  "transition-colors",
+                  "rounded-none",
+                  idx === 0 ? "rounded-tl-lg" : null,
+                  idx === items.length - 1 ? "rounded-tr-lg" : null,
+                  isActive ? "text-white" : "bg-transparent text-slate-600 hover:bg-white/60 hover:text-slate-900",
+                  isDisabled ? "cursor-not-allowed opacity-50" : null
+                ),
+                style: {
+                  background: isActive ? "var(--mode-primary-color, var(--app-btn-primary-bg))" : void 0
+                },
+                children: /* @__PURE__ */ jsx("span", { className: "inline-flex items-center justify-center text-[14px] leading-none", children: item.icon })
+              }
+            )
+          },
+          item.id
+        );
+      })
+    }
+  );
+}
+var FLAG_PREFIX = ["__", "politogy", "enable"].join("");
+var GLOBAL_UI_IDS_FLAG = [FLAG_PREFIX, "global", "ui", "ids"].join("_");
+function isFlagEnabled(name) {
+  if (typeof window === "undefined") return false;
+  try {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get(name) === "1") return true;
+  } catch {
+  }
+  try {
+    return window.localStorage.getItem(name) === "1";
+  } catch {
+    return false;
+  }
+}
+function isGlobalUiIdsEnabled() {
+  return isFlagEnabled(GLOBAL_UI_IDS_FLAG);
+}
+var TARGET_SELECTOR = [
+  "main",
+  "header",
+  "footer",
+  "aside",
+  "nav",
+  "section",
+  '[role="region"]',
+  '[role="banner"]',
+  '[role="main"]',
+  '[role="navigation"]',
+  '[role="complementary"]',
+  "button",
+  '[role="button"]',
+  'a[role="button"]',
+  "input",
+  "textarea",
+  "select",
+  '[role="combobox"]',
+  '[role="listbox"]',
+  '[role="option"]',
+  '[role="textbox"]',
+  '[role="tablist"]',
+  '[role="tab"]',
+  '[role="tabpanel"]',
+  '[role="menu"]',
+  '[role="menuitem"]',
+  '[role="menuitemcheckbox"]',
+  '[role="menuitemradio"]',
+  "svg",
+  "[data-icon]"
+].join(",");
+function sanitizeToken(raw, fallback) {
+  if (!raw) return fallback;
+  const cleaned = raw.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 40);
+  return cleaned || fallback;
+}
+function pageToken(pathname) {
+  if (!pathname || pathname === "/") return "home";
+  return sanitizeToken(pathname.replace(/\//g, "-"), "page");
+}
+function inferCategory(el) {
+  const role = (el.getAttribute("role") || "").toLowerCase();
+  const tag = el.tagName.toLowerCase();
+  if (role.includes("tab") || tag === "tabs") return "tabs";
+  if (role.startsWith("menu") || role === "menu") return "menu";
+  if (tag === "button" || role === "button") return "button";
+  if (tag === "input" || tag === "textarea" || tag === "select" || role === "combobox")
+    return "field";
+  if (tag === "svg" || el.hasAttribute("data-icon")) return "icon";
+  if (["main", "header", "footer", "aside", "nav", "section"].includes(tag) || ["region", "banner", "main", "navigation", "complementary"].includes(role)) {
+    return "layout";
+  }
+  return "ui";
+}
+function inferName(el) {
+  const htmlEl = el;
+  return sanitizeToken(
+    el.getAttribute("data-testid") || el.getAttribute("aria-label") || el.getAttribute("name") || el.getAttribute("title") || htmlEl.placeholder || htmlEl.innerText || el.getAttribute("class"),
+    "item"
+  );
+}
+function assignUiIds(pathname) {
+  const used = /* @__PURE__ */ new Set();
+  document.querySelectorAll("[id]").forEach((el) => {
+    const id = el.id?.trim();
+    if (id) used.add(id);
+  });
+  const counters = {};
+  const page = pageToken(pathname);
+  const elements = document.querySelectorAll(TARGET_SELECTOR);
+  elements.forEach((el) => {
+    const category = inferCategory(el);
+    const name = inferName(el);
+    const stableKey = `ui-${category}-${name}`;
+    el.setAttribute("data-ui-category", category);
+    el.setAttribute("data-ui-key", stableKey);
+    el.setAttribute("data-ui-page", page);
+    if (el.id) {
+      return;
+    }
+    const counterKey = `${page}-${category}-${name}`;
+    counters[counterKey] = (counters[counterKey] || 0) + 1;
+    let nextId = `ui-${page}-${category}-${name}-${counters[counterKey]}`;
+    while (used.has(nextId)) {
+      counters[counterKey] += 1;
+      nextId = `ui-${page}-${category}-${name}-${counters[counterKey]}`;
+    }
+    el.id = nextId;
+    used.add(nextId);
+  });
+}
+function GlobalUiIdProvider() {
+  const location = useLocation();
+  const enabled = isGlobalUiIdsEnabled();
+  useEffect(() => {
+    if (!enabled) return;
+    let rafId = 0;
+    const schedule = () => {
+      if (rafId) return;
+      rafId = window.requestAnimationFrame(() => {
+        rafId = 0;
+        assignUiIds(location.pathname);
+      });
+    };
+    schedule();
+    const observer = new MutationObserver(() => {
+      schedule();
+    });
+    observer.observe(document.body, {
+      subtree: true,
+      childList: true,
+      attributes: true,
+      attributeFilter: ["role", "aria-label", "name", "title", "placeholder", "class", "data-icon"]
+    });
+    return () => {
+      if (rafId) window.cancelAnimationFrame(rafId);
+      observer.disconnect();
+    };
+  }, [enabled, location.pathname]);
+  return null;
+}
+var ShellAuthContext = createContext(null);
+var ShellMetaContext = createContext(null);
+function toShellUser(session) {
+  if (!session?.user) return null;
+  const su = session.user;
+  const fullName = su.user_metadata?.full_name ?? null;
+  return {
+    id: su.id,
+    email: su.email ?? null,
+    displayName: fullName ?? su.email ?? null,
+    raw: su
+  };
+}
+function ShellProvider({
+  children,
+  supabaseClient,
+  currentApp,
+  appRegistry,
+  basename
+}) {
+  const [status, setStatus] = useState("loading");
+  const [session, setSession] = useState(null);
+  useEffect(() => {
+    let cancelled = false;
+    supabaseClient.auth.getSession().then(({ data }) => {
+      if (cancelled) return;
+      setSession(data.session);
+      setStatus(data.session ? "authenticated" : "unauthenticated");
+    });
+    const sub = supabaseClient.auth.onAuthStateChange((_event, newSession) => {
+      setSession(newSession);
+      setStatus(newSession ? "authenticated" : "unauthenticated");
+    });
+    return () => {
+      cancelled = true;
+      sub.data.subscription.unsubscribe();
+    };
+  }, [supabaseClient]);
+  const value = useMemo(
+    () => ({
+      status,
+      session,
+      user: toShellUser(session),
+      signOut: async () => {
+        await supabaseClient.auth.signOut();
+      }
+    }),
+    [status, session, supabaseClient]
+  );
+  const meta = useMemo(
+    () => ({
+      currentApp,
+      appRegistry: appRegistry ?? [],
+      basename: basename ?? ""
+    }),
+    [currentApp, appRegistry, basename]
+  );
+  return /* @__PURE__ */ jsx(ShellAuthContext.Provider, { value, children: /* @__PURE__ */ jsx(ShellMetaContext.Provider, { value: meta, children: /* @__PURE__ */ jsx(ChakraProvider, { theme: politogyTheme, children }) }) });
+}
+function useShellAuth() {
+  const ctx = useContext(ShellAuthContext);
+  if (!ctx) {
+    throw new Error("useShellAuth must be used inside <ShellProvider>");
+  }
+  return ctx;
+}
+function useAppRegistry() {
+  const meta = useContext(ShellMetaContext);
+  if (!meta) {
+    throw new Error("useAppRegistry must be used inside <ShellProvider>");
+  }
+  return meta.appRegistry;
+}
+function useCurrentApp() {
+  const meta = useContext(ShellMetaContext);
+  if (!meta) {
+    throw new Error("useCurrentApp must be used inside <ShellProvider>");
+  }
+  return meta.currentApp;
+}
+function Header({ extrasSlot }) {
+  const { user, signOut, status } = useShellAuth();
+  return /* @__PURE__ */ jsxs(
+    Flex,
+    {
+      as: "header",
+      align: "center",
+      px: 4,
+      h: "56px",
+      bg: "white",
+      borderBottom: "1px solid",
+      borderColor: "gray.200",
+      children: [
+        /* @__PURE__ */ jsx(Heading, { size: "md", color: "brand.500", children: "politogy" }),
+        /* @__PURE__ */ jsx(Spacer, {}),
+        extrasSlot && /* @__PURE__ */ jsx(Box, { mr: 3, children: extrasSlot }),
+        status === "authenticated" && user && /* @__PURE__ */ jsxs(Menu, { children: [
+          /* @__PURE__ */ jsx(MenuButton, { children: /* @__PURE__ */ jsx(Avatar, { size: "sm", name: user.displayName ?? user.email ?? "" }) }),
+          /* @__PURE__ */ jsx(MenuList, { children: /* @__PURE__ */ jsx(MenuItem, { onClick: () => signOut(), children: "Sign out" }) })
+        ] })
+      ]
+    }
+  );
+}
+function Sidebar({ entries, currentApp, footerSlot }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      as: "nav",
+      w: "200px",
+      minH: "100%",
+      bg: "gray.50",
+      borderRight: "1px solid",
+      borderColor: "gray.200",
+      p: 3,
+      display: "flex",
+      flexDirection: "column",
+      children: [
+        /* @__PURE__ */ jsx(VStack, { align: "stretch", spacing: 1, children: entries.filter((e) => e.visible !== false).map((entry) => /* @__PURE__ */ jsx(
+          Link$1,
+          {
+            href: entry.path,
+            "data-current": entry.id === currentApp,
+            px: 3,
+            py: 2,
+            borderRadius: "md",
+            fontWeight: entry.id === currentApp ? "bold" : "normal",
+            bg: entry.id === currentApp ? "brand.50" : "transparent",
+            _hover: { bg: "gray.100" },
+            children: /* @__PURE__ */ jsx(Text, { children: entry.label })
+          },
+          entry.id
+        )) }),
+        /* @__PURE__ */ jsx(Box, { flex: "1" }),
+        footerSlot && /* @__PURE__ */ jsx(Box, { pt: 3, children: footerSlot })
+      ]
+    }
+  );
+}
+function Footer({ buildInfo }) {
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      as: "footer",
+      px: 4,
+      py: 2,
+      borderTop: "1px solid",
+      borderColor: "gray.200",
+      fontSize: "xs",
+      color: "gray.500",
+      children: /* @__PURE__ */ jsxs(Text, { children: [
+        "politogy ",
+        buildInfo ? `\xB7 ${buildInfo}` : ""
+      ] })
+    }
+  );
+}
+function AppLayout({
+  children,
+  buildInfo,
+  headerExtrasSlot,
+  modalsSlot,
+  notificationsSlot,
+  sidebarFooterSlot,
+  overlaySlot
+}) {
+  const currentApp = useCurrentApp();
+  const entries = useAppRegistry();
+  return /* @__PURE__ */ jsxs(Flex, { direction: "column", minH: "100vh", children: [
+    /* @__PURE__ */ jsx(Header, { extrasSlot: headerExtrasSlot }),
+    /* @__PURE__ */ jsxs(Flex, { flex: "1", minH: 0, children: [
+      /* @__PURE__ */ jsx(Sidebar, { entries, currentApp, footerSlot: sidebarFooterSlot }),
+      /* @__PURE__ */ jsxs(Box, { as: "main", flex: "1", overflow: "auto", position: "relative", children: [
+        children,
+        notificationsSlot
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Footer, { buildInfo }),
+    modalsSlot,
+    overlaySlot
+  ] });
+}
+
+// src/sw/registerShellPrecache.ts
+async function registerShellPrecache(opts = {}) {
+  if (typeof window === "undefined") return;
+  if (!("serviceWorker" in navigator)) return;
+  const scriptUrl = opts.scriptUrl ?? "/sw-shell.js";
+  const scope = opts.scope ?? "/";
+  try {
+    await navigator.serviceWorker.register(scriptUrl, { scope });
+  } catch (err) {
+    console.warn("[shell] precache SW registration failed:", err);
+  }
+}
+
+// src/speculation/emitRules.ts
+function buildSpeculationRules(currentApp, registry) {
+  const others = registry.filter(
+    (entry) => entry.id !== currentApp && entry.visible !== false
+  );
+  if (others.length === 0) return null;
+  const payload = {
+    prerender: [
+      {
+        urls: others.map((entry) => entry.path),
+        eagerness: "moderate"
+      }
+    ]
+  };
+  return JSON.stringify(payload);
+}
+
+export { AppLayout, BreadcrumbBar, Card, Footer, GlobalUiIdProvider, Header, HeaderTabBar, PageContainer, PageHeader, ShellProvider, Sidebar, buildSpeculationRules, politogyTheme, registerShellPrecache, useAppRegistry, useCurrentApp, useShellAuth };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map