@orangecheck/ui 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -0,0 +1,23 @@
+# Changelog
+
+All notable changes to **`@orangecheck/ui`** will be documented in this file.
+
+This project follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/)
+and [Semantic Versioning](https://semver.org/). This package is family-internal
+(consumed only by the `*.ochk.io` sub-sites); the surface is intentionally
+small and the API may evolve quickly.
+
+## [Unreleased]
+
+- _(no pending changes)_
+
+## [0.1.0] — Initial published state
+
+Initial public release. Family-internal UI for the `.ochk.io` sub-sites:
+
+- `<EcosystemSwitcher>` — cross-product dropdown for jumping between every
+  site in the OrangeCheck family. Lifted out of seven near-identical copies
+  living in each web repo.
+
+[Unreleased]: https://github.com/orangecheck/oc-packages/compare/ui-v0.1.0...HEAD
+[0.1.0]: https://github.com/orangecheck/oc-packages/releases/tag/ui-v0.1.0

package/dist/index.d.mts

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge';
+type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics';
 interface EcosystemSwitcherProps {
     current: EcosystemSlug;
     className?: string;
+    showOwnerEntries?: boolean;
 }
-declare function EcosystemSwitcher({ current, className, }: EcosystemSwitcherProps): react_jsx_runtime.JSX.Element;
+declare function EcosystemSwitcher({ current, className, showOwnerEntries, }: EcosystemSwitcherProps): react_jsx_runtime.JSX.Element;
 
-type FamilyCategory = 'hub' | 'product' | 'protocol';
+type FamilyCategory = 'hub' | 'product' | 'protocol' | 'owner';
 interface FamilyProperty {
     slug: EcosystemSlug;
     origin: string;
@@ -31,8 +32,9 @@ interface OcLogoDropdownProps {
     className?: string;
     triggerClassName?: string;
     popoverClassName?: string;
+    showOwnerEntries?: boolean;
 }
-declare function OcLogoDropdown({ current, homeHref, siteState, children, className, triggerClassName, popoverClassName, }: OcLogoDropdownProps): react_jsx_runtime.JSX.Element;
+declare function OcLogoDropdown({ current, homeHref, siteState, children, className, triggerClassName, popoverClassName, showOwnerEntries, }: OcLogoDropdownProps): react_jsx_runtime.JSX.Element;
 
 interface OcAccountMenuItem {
     href: string;

package/dist/index.d.ts

@@ -1,14 +1,15 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge';
+type EcosystemSlug = 'home' | 'docs' | 'fleet' | 'me' | 'vault' | 'attest' | 'lock' | 'vote' | 'stamp' | 'agent' | 'pledge' | 'analytics';
 interface EcosystemSwitcherProps {
     current: EcosystemSlug;
     className?: string;
+    showOwnerEntries?: boolean;
 }
-declare function EcosystemSwitcher({ current, className, }: EcosystemSwitcherProps): react_jsx_runtime.JSX.Element;
+declare function EcosystemSwitcher({ current, className, showOwnerEntries, }: EcosystemSwitcherProps): react_jsx_runtime.JSX.Element;
 
-type FamilyCategory = 'hub' | 'product' | 'protocol';
+type FamilyCategory = 'hub' | 'product' | 'protocol' | 'owner';
 interface FamilyProperty {
     slug: EcosystemSlug;
     origin: string;
@@ -31,8 +32,9 @@ interface OcLogoDropdownProps {
     className?: string;
     triggerClassName?: string;
     popoverClassName?: string;
+    showOwnerEntries?: boolean;
 }
-declare function OcLogoDropdown({ current, homeHref, siteState, children, className, triggerClassName, popoverClassName, }: OcLogoDropdownProps): react_jsx_runtime.JSX.Element;
+declare function OcLogoDropdown({ current, homeHref, siteState, children, className, triggerClassName, popoverClassName, showOwnerEntries, }: OcLogoDropdownProps): react_jsx_runtime.JSX.Element;
 
 interface OcAccountMenuItem {
     href: string;

package/dist/index.js

@@ -91,9 +91,19 @@ var ENTRIES = [
     docsHref: "https://docs.ochk.io/pledge"
   }
 ];
+var OWNER_ENTRIES = [
+  {
+    slug: "analytics",
+    href: "https://analytics.ochk.io",
+    label: "oc\xB7analytics",
+    sub: "owner cockpit",
+    docsHref: "https://analytics.ochk.io"
+  }
+];
 function EcosystemSwitcher({
   current,
-  className
+  className,
+  showOwnerEntries = false
 }) {
   const [open, setOpen] = react.useState(false);
   const containerRef = react.useRef(null);
@@ -143,7 +153,7 @@ function EcosystemSwitcher({
         className: "bg-background absolute right-0 top-full z-[60] mt-2 w-72 border shadow-lg",
         children: [
           /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the family" }),
-          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "py-1", children: ENTRIES.map((e) => {
+          /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "py-1", children: [...ENTRIES, ...showOwnerEntries ? OWNER_ENTRIES : []].map((e) => {
             const isActive2 = e.slug === current;
             return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
               Link5__default.default,
@@ -281,6 +291,15 @@ var FAMILY_PROPERTIES = [
     sub: "swear \u2014 bonded commitment",
     docsHref: "https://docs.ochk.io/pledge",
     category: "protocol"
+  },
+  {
+    slug: "analytics",
+    origin: "https://analytics.ochk.io",
+    hostname: "analytics.ochk.io",
+    label: "oc\xB7analytics",
+    sub: "owner cockpit",
+    docsHref: "https://analytics.ochk.io",
+    category: "owner"
   }
 ];
 var SITE_STATE_LABEL = {
@@ -293,18 +312,20 @@ function findFamilyProperty(slug) {
 var SECTIONS = [
   { category: "hub", label: "hub" },
   { category: "product", label: "products" },
-  { category: "protocol", label: "protocols" }
+  { category: "protocol", label: "protocols" },
+  { category: "owner", label: "owner" }
 ];
 function CategoryChip({ category }) {
   if (category === "hub") return null;
-  const isProduct = category === "product";
+  const label = category === "product" ? "product" : category === "protocol" ? "protocol" : "owner";
+  const tone = category === "product" ? "border-primary/25 bg-primary/10 text-primary" : category === "protocol" ? "border-muted-foreground/20 bg-muted/40 text-muted-foreground/85" : "border-warning/30 bg-warning/10 text-warning";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
-      "aria-label": isProduct ? "commercial product" : "protocol reference",
-      className: "ml-1 hidden rounded-sm border px-1.5 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block " + (isProduct ? "border-primary/25 bg-primary/10 text-primary" : "border-muted-foreground/20 bg-muted/40 text-muted-foreground/85"),
+      "aria-label": category === "product" ? "commercial product" : category === "protocol" ? "protocol reference" : "owner-only surface",
+      className: "ml-1 hidden rounded-sm border px-1.5 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase sm:inline-block " + tone,
       "data-oc-category": category,
-      children: isProduct ? "product" : "protocol"
+      children: label
     }
   );
 }
@@ -322,13 +343,14 @@ function SiteStateBadge({ state }) {
 }
 function MenuCategoryChip({ category }) {
   if (category === "hub") return null;
-  const isProduct = category === "product";
+  const label = category === "product" ? "pro" : category === "protocol" ? "spec" : "own";
+  const tone = category === "product" ? "bg-primary/10 text-primary" : category === "protocol" ? "bg-muted/60 text-muted-foreground/80" : "bg-warning/15 text-warning";
   return /* @__PURE__ */ jsxRuntime.jsx(
     "span",
     {
       "aria-hidden": true,
-      className: "inline-block shrink-0 rounded-sm px-1 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase " + (isProduct ? "bg-primary/10 text-primary" : "bg-muted/60 text-muted-foreground/80"),
-      children: isProduct ? "pro" : "spec"
+      className: "inline-block shrink-0 rounded-sm px-1 py-[1px] font-mono text-[9px] font-medium tracking-widest uppercase " + tone,
+      children: label
     }
   );
 }
@@ -339,7 +361,8 @@ function OcLogoDropdown({
   children,
   className,
   triggerClassName,
-  popoverClassName
+  popoverClassName,
+  showOwnerEntries = false
 }) {
   const [open, setOpen] = react.useState(false);
   const containerRef = react.useRef(null);
@@ -375,7 +398,7 @@ function OcLogoDropdown({
     "div",
     {
       ref: containerRef,
-      className: "relative " + (className ?? ""),
+      className: "relative inline-flex items-center " + (className ?? ""),
       "data-oc-logo-dropdown": "",
       "data-oc-current-category": currentCategory,
       "data-oc-site-state": siteState,
@@ -403,24 +426,28 @@ function OcLogoDropdown({
                   "aria-hidden": true,
                   className: "text-muted-foreground/70 group-hover:text-foreground/80 h-3.5 w-3.5 shrink-0 transition-transform duration-200 " + (open ? "rotate-180" : "")
                 }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs(
-                "span",
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Link5__default.default,
+          {
+            href: homeHref,
+            "aria-label": "go to " + homeHref + " (this site's home)",
+            onClick: () => setOpen(false),
+            tabIndex: open ? 0 : -1,
+            className: "hover:text-primary group/home -ml-1 hidden items-center gap-1 rounded-sm px-1.5 py-1 font-mono text-[9px] tracking-widest uppercase transition-all duration-200 sm:inline-flex " + (open ? "pointer-events-auto translate-x-0 text-muted-foreground/70 opacity-100 hover:bg-accent/30" : "pointer-events-none -translate-x-1 opacity-0"),
+            "data-oc-logo-dropdown-home-hint": "",
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                lucideReact.CornerDownLeft,
                 {
                   "aria-hidden": true,
-                  className: "pointer-events-none ml-0.5 hidden items-center gap-1 font-mono text-[9px] tracking-widest uppercase transition-all duration-200 sm:inline-flex " + (open ? "text-muted-foreground/70 translate-x-0 opacity-100" : "-translate-x-1 opacity-0"),
-                  "data-oc-logo-dropdown-home-hint": "",
-                  children: [
-                    /* @__PURE__ */ jsxRuntime.jsx(
-                      lucideReact.CornerDownLeft,
-                      {
-                        className: "h-3 w-3 " + (open ? "motion-safe:animate-pulse" : "")
-                      }
-                    ),
-                    /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary/70", children: "home" })
-                  ]
+                  className: "h-3 w-3 group-hover/home:text-primary " + (open ? "motion-safe:animate-pulse" : "")
                 }
-              )
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-primary/70 group-hover/home:text-primary", children: "home" })
             ]
           }
         ),
@@ -435,6 +462,7 @@ function OcLogoDropdown({
             children: [
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "label-mono text-primary border-b px-4 py-2", children: "\xA7 the orangecheck family" }),
               /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-h-[min(28rem,70vh)] overflow-y-auto py-1", role: "none", children: SECTIONS.map(({ category, label }) => {
+                if (category === "owner" && !showOwnerEntries) return null;
                 const sectionEntries = FAMILY_PROPERTIES.filter(
                   (e) => e.category === category
                 );