@burdenoff/microfe-devportal 2026.1108.2 → 2026.1109.1

package/dist/devportal/components/SectionNav.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionNav.js","names":["OrgSwitcher","useDevportal","isSeller","useIsSellerSection","currentOrgId","activePhysicalOrgId","activeOrgId","setCurrentOrgId","setActivePhysicalOrgId","setActiveOrgId","tr","useTr","open","setOpen","useState","ref","useRef","useGetMyOrganizationsQuery","orgs","data","org","useEffect","handler","label","o","createOrgPath","orgSectionPath","v","cn","Building2","ChevronDown","Check","navigate","basePath","Plus"],"sources":["../../../src/devportal/components/SectionNav.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport {\n  LayoutDashboard,\n  AppWindow,\n  Building2,\n  Share2,\n  DollarSign,\n  BookOpen,\n  Library,\n  User,\n  Settings,\n  ChevronDown,\n  Check,\n  Plus,\n} from \"lucide-react\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  useIsSellerSection,\n  orgSectionPath,\n} from \"../hooks/useIsSellerSection\";\nimport {\n  useGetMyOrganizationsQuery,\n  type GetMyOrganizationsQuery,\n} from \"../hooks/useGraphQL\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\ntype OrgItem = GetMyOrganizationsQuery[\"myDeveloperOrganizations\"][number];\n\ninterface SectionDef {\n  path: string;\n  i18nKey: string;\n  fallback: string;\n  icon: typeof LayoutDashboard;\n  /** Additional sub-paths that should mark this section as active. */\n  matchPrefixes?: string[];\n}\n\nconst SECTIONS: ReadonlyArray<SectionDef> = [\n  {\n    path: \"\",\n    i18nKey: \"devportal.nav.dashboard\",\n    fallback: \"Dashboard\",\n    icon: LayoutDashboard,\n  },\n  {\n    path: \"apps\",\n    i18nKey: \"devportal.nav.apps\",\n    fallback: \"Apps\",\n    icon: AppWindow,\n  },\n  {\n    path: \"organizations\",\n    i18nKey: \"devportal.nav.organizations\",\n    fallback: \"Organizations\",\n    icon: Building2,\n  },\n  {\n    path: \"delegations\",\n    i18nKey: \"devportal.nav.delegations\",\n    fallback: \"Delegations\",\n    icon: Share2,\n  },\n  {\n    path: \"revenue\",\n    i18nKey: \"devportal.nav.revenue\",\n    fallback: \"Revenue\",\n    icon: DollarSign,\n  },\n  {\n    path: \"docs\",\n    i18nKey: \"devportal.nav.docs\",\n    fallback: \"Docs\",\n    icon: BookOpen,\n  },\n  {\n    path: \"resources\",\n    i18nKey: \"devportal.nav.resources\",\n    fallback: \"Resources\",\n    icon: Library,\n  },\n  {\n    path: \"publisher/profile\",\n    i18nKey: \"devportal.nav.publisher\",\n    fallback: \"Publisher\",\n    icon: User,\n    matchPrefixes: [\"publisher\"],\n  },\n  {\n    path: \"settings\",\n    i18nKey: \"devportal.nav.settings\",\n    fallback: \"Settings\",\n    icon: Settings,\n  },\n];\n\nfunction joinBaseAndPath(basePath: string | undefined, path: string): string {\n  const base = (basePath ?? \"\").replace(/\\/$/, \"\");\n  if (!path) return base || \"/\";\n  const suffix = path.startsWith(\"/\") ? path : `/${path}`;\n  return `${base}${suffix}`;\n}\n\nfunction isSectionActive(\n  pathname: string,\n  basePath: string | undefined,\n  section: SectionDef,\n): boolean {\n  const sectionUrl = joinBaseAndPath(basePath, section.path);\n  // Index/dashboard is active only when exactly matched (or with empty extra).\n  if (section.path === \"\") {\n    return pathname === sectionUrl || pathname === `${sectionUrl}/`;\n  }\n  const candidates = [section.path, ...(section.matchPrefixes ?? [])];\n  return candidates.some((prefix) => {\n    const url = joinBaseAndPath(basePath, prefix);\n    return pathname === url || pathname.startsWith(`${url}/`);\n  });\n}\n\n/**\n * Org context switcher — can be embedded standalone or inside SectionNav.\n *\n * Shared between the regular devportal and the seller portal: filters the\n * org list to PHYSICAL-kind orgs under /devportal/seller/** and DIGITAL-kind\n * everywhere else, and reads/writes the matching active-org slot\n * (activePhysicalOrgId vs activeOrgId) so this switcher and\n * useSellerOrganization (used by the item-creation flow) always agree on\n * which org is current. See DeveloperOrgKind (BOFF-7285).\n */\nexport const OrgSwitcher: FC = () => {\n  const {\n    activeOrgId,\n    setActiveOrgId,\n    activePhysicalOrgId,\n    setActivePhysicalOrgId,\n    navigate,\n    basePath,\n  } = useDevportal();\n  const isSeller = useIsSellerSection();\n  const currentOrgId = isSeller ? activePhysicalOrgId : activeOrgId;\n  const setCurrentOrgId = isSeller ? setActivePhysicalOrgId : setActiveOrgId;\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { data } = useGetMyOrganizationsQuery({ fetchPolicy: \"cache-first\" });\n  const allOrgs: OrgItem[] = data?.myDeveloperOrganizations ?? [];\n  const orgs = allOrgs.filter((org) =>\n    isSeller ? org.kind === \"PHYSICAL\" : org.kind !== \"PHYSICAL\",\n  );\n\n  // Auto-select when there's exactly one matching org and nothing is stored yet\n  useEffect(() => {\n    if (!currentOrgId && orgs.length === 1 && orgs[0]?.id) {\n      setCurrentOrgId(orgs[0].id);\n    }\n  }, [orgs, currentOrgId, setCurrentOrgId]);\n\n  // Close on outside click\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    if (open) document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  const activeOrg = orgs.find((o) => o.id === currentOrgId);\n  const label =\n    activeOrg?.name ??\n    (orgs.length === 0\n      ? tr(\"devportal.nav.noOrg\", \"No organization\")\n      : tr(\"devportal.nav.selectOrg\", \"Select org\"));\n\n  const createOrgPath = orgSectionPath(isSeller, \"new\");\n\n  return (\n    <div ref={ref} className=\"relative flex-shrink-0\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors\",\n          \"bg-bg-surface text-text-primary border-border-subtle hover:bg-accent\",\n        )}\n        aria-label={tr(\"devportal.nav.switchOrg\", \"Switch organization\")}\n      >\n        <Building2 size={13} className=\"text-primary flex-shrink-0\" />\n        <span className=\"max-w-[140px] truncate\">{label}</span>\n        <ChevronDown\n          size={13}\n          className={cn(\"transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border-subtle bg-popover shadow-lg py-1\">\n          {orgs.map((org) => (\n            <button\n              key={org.id}\n              type=\"button\"\n              onClick={() => {\n                setCurrentOrgId(org.id);\n                setOpen(false);\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent\",\n                org.id === currentOrgId\n                  ? \"text-primary font-medium\"\n                  : \"text-text-primary\",\n              )}\n            >\n              <Check\n                size={13}\n                className={cn(\n                  \"flex-shrink-0\",\n                  org.id === currentOrgId\n                    ? \"opacity-100 text-primary\"\n                    : \"opacity-0\",\n                )}\n              />\n              <span className=\"truncate\">{org.name}</span>\n            </button>\n          ))}\n          {orgs.length > 0 && (\n            <div className=\"my-1 border-t border-border-subtle\" />\n          )}\n          <button\n            type=\"button\"\n            onClick={() => {\n              setOpen(false);\n              navigate?.(`${basePath ?? \"\"}${createOrgPath}`);\n            }}\n            className=\"flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-primary transition-colors hover:bg-accent\"\n          >\n            <Plus size={13} className=\"flex-shrink-0\" />\n            <span className=\"truncate\">\n              {tr(\"devportal.nav.newOrganization\", \"New organization\")}\n            </span>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Horizontal section nav rendered above the page content on every devportal\n * route. Gives developers a one-click jump between all top-level sections so\n * routes like OAuth, Delegations, Analytics, Revenue, Docs, Resources,\n * Publisher Profile, and Settings are reachable without typing URLs.\n *\n * Renders nothing when `basePath` is undefined (standalone/dev mode) so it\n * doesn't conflict with whatever harness wraps the MFE there.\n */\nexport const SectionNav: FC = () => {\n  const { navigate, basePath } = useDevportal();\n  const { pathname } = useLocation();\n  const tr = useTr();\n\n  if (!basePath || !navigate) return null;\n\n  const handleClick = (path: string) => {\n    navigate(joinBaseAndPath(basePath, path));\n  };\n\n  return (\n    <nav\n      aria-label={tr(\"devportal.nav.sections\", \"Developer portal sections\")}\n      className=\"border-b border-border-subtle bg-bg-surface/40 px-4 py-2\"\n      data-testid=\"devportal-section-nav\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <ul className=\"flex flex-1 flex-wrap gap-1\">\n          {SECTIONS.map((section) => {\n            const active = isSectionActive(pathname, basePath, section);\n            const Icon = section.icon;\n            return (\n              <li key={section.path}>\n                <button\n                  type=\"button\"\n                  onClick={() => handleClick(section.path)}\n                  aria-current={active ? \"page\" : undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n                    active\n                      ? \"bg-action-primary-bg text-action-primary-text\"\n                      : \"text-text-secondary hover:bg-accent hover:text-text-primary\",\n                  )}\n                >\n                  <Icon size={14} />\n                  <span>{tr(section.i18nKey, section.fallback)}</span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <OrgSwitcher />\n      </div>\n    </nav>\n  );\n};\n\n// Exported for unit tests that want to assert against the canonical list.\nexport const __SECTION_NAV_SECTIONS = SECTIONS;\n"],"mappings":";;;;;;;;;;;AAoIA,IAAaA,UAAwB;CACnC,IAAM,EACJ,gBACA,mBACA,wBACA,2BACA,aACA,gBACEC,EAAa,GACXC,IAAWC,EAAmB,GAC9BC,IAAeF,IAAWG,IAAsBC,GAChDC,IAAkBL,IAAWM,IAAyBC,GACtDC,IAAKC,EAAM,GACX,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChCC,IAAMC,EAAuB,IAAI,GAEjC,EAAE,YAASC,EAA2B,EAAE,aAAa,cAAc,CAAC,GAEpEC,KADqBC,GAAM,4BAA4B,CAAC,EAAA,CACzC,QAAQ,MAC3BjB,IAAWkB,EAAI,SAAS,aAAaA,EAAI,SAAS,UACpD;CAUA,AAPAC,QAAgB;EACd,AAAI,CAACjB,KAAgBc,EAAK,WAAW,KAAKA,EAAK,EAAE,EAAE,MACjDX,EAAgBW,EAAK,EAAE,CAAC,EAAE;CAE9B,GAAG;EAACA;EAAMd;EAAcG;CAAe,CAAC,GAGxCc,QAAgB;EACd,IAAMC,KAAW,MAAkB;GACjC,AAAIP,EAAI,WAAW,CAACA,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvDF,EAAQ,EAAK;EAEjB;EAEA,OADID,KAAM,SAAS,iBAAiB,aAAaU,CAAO,SAC3C,SAAS,oBAAoB,aAAaA,CAAO;CAChE,GAAG,CAACV,CAAI,CAAC;CAGT,IAAMW,IADYL,EAAK,MAAM,MAAMM,EAAE,OAAOpB,CAE1C,CAAA,EAAW,SACVc,EAAK,WAAW,IACbR,EAAG,uBAAuB,iBAAiB,IAC3CA,EAAG,2BAA2B,YAAY,IAE1Ce,IAAgBC,EAAexB,GAAU,KAAK;CAEpD,OACE,kBAAC,OAAD;EAAU;EAAK,WAAU;EAAzB,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAeW,GAAS,MAAM,CAACc,CAAC;GAChC,WAAWC,EACT,wGACA,sEACF;GACA,cAAYlB,EAAG,2BAA2B,qBAAqB;GAPjE,UAAA;IASE,kBAACmB,GAAD;KAAW,MAAM;KAAI,WAAU;IAA8B,CAAA;IAC7D,kBAAC,QAAD;KAAM,WAAU;KAA0B,UAAAN;IAAY,CAAA;IACtD,kBAACO,GAAD;KACE,MAAM;KACN,WAAWF,EAAG,wBAAwBhB,KAAQ,YAAY;IAC3D,CAAA;GACK;EAEP,CAAA,GAAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACGM,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;MAEb,AADAX,EAAgBa,EAAI,EAAE,GACtBP,EAAQ,EAAK;KACf;KACA,WAAWe,EACT,gGACAR,EAAI,OAAOhB,IACP,6BACA,mBACN;KAZF,UAAA,CAcE,kBAAC2B,GAAD;MACE,MAAM;MACN,WAAWH,EACT,iBACAR,EAAI,OAAOhB,IACP,6BACA,WACN;KACD,CAAA,GACD,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAAgB,EAAI;KAAW,CAAA,CACrC;IAvBD,GAAAA,EAAI,EAuBH,CACT;IACAF,EAAK,SAAS,KACb,kBAAC,OAAD,EAAK,WAAU,qCAAsC,CAAA;IAEvD,kBAAC,UAAD;KACE,MAAK;KACL,eAAe;MAEb,AADAL,EAAQ,EAAK,GACbmB,IAAW,GAAGC,KAAY,KAAKR,GAAe;KAChD;KACA,WAAU;KANZ,UAAA,CAQE,kBAACS,GAAD;MAAM,MAAM;MAAI,WAAU;KAAiB,CAAA,GAC3C,kBAAC,QAAD;MAAM,WAAU;MACb,UAAAxB,EAAG,iCAAiC,kBAAkB;KACnD,CAAA,CACA;;GACL;EAEJ,CAAA,CAAA;;AAET"}
+{"version":3,"file":"SectionNav.js","names":["OrgSwitcher","useDevportal","isSeller","useIsSellerSection","currentOrgId","activePhysicalOrgId","activeOrgId","setCurrentOrgId","setActivePhysicalOrgId","setActiveOrgId","tr","useTr","open","setOpen","useState","ref","useRef","useGetMyOrganizationsQuery","orgs","data","org","useEffect","handler","label","o","createOrgPath","orgSectionPath","v","cn","Building2","ChevronDown","Check","navigate","basePath","Plus"],"sources":["../../../src/devportal/components/SectionNav.tsx"],"sourcesContent":["import type { FC } from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useLocation } from \"react-router\";\nimport {\n  LayoutDashboard,\n  AppWindow,\n  Blocks,\n  Building2,\n  Share2,\n  DollarSign,\n  BookOpen,\n  Library,\n  User,\n  Settings,\n  ChevronDown,\n  Check,\n  Plus,\n} from \"lucide-react\";\nimport { useDevportal } from \"../providers/DevportalProvider\";\nimport {\n  useIsSellerSection,\n  orgSectionPath,\n} from \"../hooks/useIsSellerSection\";\nimport {\n  useGetMyOrganizationsQuery,\n  type GetMyOrganizationsQuery,\n} from \"../hooks/useGraphQL\";\nimport { cn } from \"../utils/cn\";\nimport { useTr } from \"../utils/i18n\";\n\ntype OrgItem = GetMyOrganizationsQuery[\"myDeveloperOrganizations\"][number];\n\ninterface SectionDef {\n  path: string;\n  i18nKey: string;\n  fallback: string;\n  icon: typeof LayoutDashboard;\n  /** Additional sub-paths that should mark this section as active. */\n  matchPrefixes?: string[];\n}\n\nconst SECTIONS: ReadonlyArray<SectionDef> = [\n  {\n    path: \"\",\n    i18nKey: \"devportal.nav.dashboard\",\n    fallback: \"Dashboard\",\n    icon: LayoutDashboard,\n  },\n  {\n    path: \"apps\",\n    i18nKey: \"devportal.nav.apps\",\n    fallback: \"Apps\",\n    icon: AppWindow,\n  },\n  {\n    path: \"timecampus-applets\",\n    i18nKey: \"devportal.nav.timecampusApplets\",\n    fallback: \"TimeCampus Applets\",\n    icon: Blocks,\n  },\n  {\n    path: \"organizations\",\n    i18nKey: \"devportal.nav.organizations\",\n    fallback: \"Organizations\",\n    icon: Building2,\n  },\n  {\n    path: \"delegations\",\n    i18nKey: \"devportal.nav.delegations\",\n    fallback: \"Delegations\",\n    icon: Share2,\n  },\n  {\n    path: \"revenue\",\n    i18nKey: \"devportal.nav.revenue\",\n    fallback: \"Revenue\",\n    icon: DollarSign,\n  },\n  {\n    path: \"docs\",\n    i18nKey: \"devportal.nav.docs\",\n    fallback: \"Docs\",\n    icon: BookOpen,\n  },\n  {\n    path: \"resources\",\n    i18nKey: \"devportal.nav.resources\",\n    fallback: \"Resources\",\n    icon: Library,\n  },\n  {\n    path: \"publisher/profile\",\n    i18nKey: \"devportal.nav.publisher\",\n    fallback: \"Publisher\",\n    icon: User,\n    matchPrefixes: [\"publisher\"],\n  },\n  {\n    path: \"settings\",\n    i18nKey: \"devportal.nav.settings\",\n    fallback: \"Settings\",\n    icon: Settings,\n  },\n];\n\nfunction joinBaseAndPath(basePath: string | undefined, path: string): string {\n  const base = (basePath ?? \"\").replace(/\\/$/, \"\");\n  if (!path) return base || \"/\";\n  const suffix = path.startsWith(\"/\") ? path : `/${path}`;\n  return `${base}${suffix}`;\n}\n\nfunction isSectionActive(\n  pathname: string,\n  basePath: string | undefined,\n  section: SectionDef,\n): boolean {\n  const sectionUrl = joinBaseAndPath(basePath, section.path);\n  // Index/dashboard is active only when exactly matched (or with empty extra).\n  if (section.path === \"\") {\n    return pathname === sectionUrl || pathname === `${sectionUrl}/`;\n  }\n  const candidates = [section.path, ...(section.matchPrefixes ?? [])];\n  return candidates.some((prefix) => {\n    const url = joinBaseAndPath(basePath, prefix);\n    return pathname === url || pathname.startsWith(`${url}/`);\n  });\n}\n\n/**\n * Org context switcher — can be embedded standalone or inside SectionNav.\n *\n * Shared between the regular devportal and the seller portal: filters the\n * org list to PHYSICAL-kind orgs under /devportal/seller/** and DIGITAL-kind\n * everywhere else, and reads/writes the matching active-org slot\n * (activePhysicalOrgId vs activeOrgId) so this switcher and\n * useSellerOrganization (used by the item-creation flow) always agree on\n * which org is current. See DeveloperOrgKind (BOFF-7285).\n */\nexport const OrgSwitcher: FC = () => {\n  const {\n    activeOrgId,\n    setActiveOrgId,\n    activePhysicalOrgId,\n    setActivePhysicalOrgId,\n    navigate,\n    basePath,\n  } = useDevportal();\n  const isSeller = useIsSellerSection();\n  const currentOrgId = isSeller ? activePhysicalOrgId : activeOrgId;\n  const setCurrentOrgId = isSeller ? setActivePhysicalOrgId : setActiveOrgId;\n  const tr = useTr();\n  const [open, setOpen] = useState(false);\n  const ref = useRef<HTMLDivElement>(null);\n\n  const { data } = useGetMyOrganizationsQuery({ fetchPolicy: \"cache-first\" });\n  const allOrgs: OrgItem[] = data?.myDeveloperOrganizations ?? [];\n  const orgs = allOrgs.filter((org) =>\n    isSeller ? org.kind === \"PHYSICAL\" : org.kind !== \"PHYSICAL\",\n  );\n\n  // Auto-select when there's exactly one matching org and nothing is stored yet\n  useEffect(() => {\n    if (!currentOrgId && orgs.length === 1 && orgs[0]?.id) {\n      setCurrentOrgId(orgs[0].id);\n    }\n  }, [orgs, currentOrgId, setCurrentOrgId]);\n\n  // Close on outside click\n  useEffect(() => {\n    const handler = (e: MouseEvent) => {\n      if (ref.current && !ref.current.contains(e.target as Node)) {\n        setOpen(false);\n      }\n    };\n    if (open) document.addEventListener(\"mousedown\", handler);\n    return () => document.removeEventListener(\"mousedown\", handler);\n  }, [open]);\n\n  const activeOrg = orgs.find((o) => o.id === currentOrgId);\n  const label =\n    activeOrg?.name ??\n    (orgs.length === 0\n      ? tr(\"devportal.nav.noOrg\", \"No organization\")\n      : tr(\"devportal.nav.selectOrg\", \"Select org\"));\n\n  const createOrgPath = orgSectionPath(isSeller, \"new\");\n\n  return (\n    <div ref={ref} className=\"relative flex-shrink-0\">\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"inline-flex items-center gap-1.5 rounded-md border px-3 py-1.5 text-sm font-medium transition-colors\",\n          \"bg-bg-surface text-text-primary border-border-subtle hover:bg-accent\",\n        )}\n        aria-label={tr(\"devportal.nav.switchOrg\", \"Switch organization\")}\n      >\n        <Building2 size={13} className=\"text-primary flex-shrink-0\" />\n        <span className=\"max-w-[140px] truncate\">{label}</span>\n        <ChevronDown\n          size={13}\n          className={cn(\"transition-transform\", open && \"rotate-180\")}\n        />\n      </button>\n\n      {open && (\n        <div className=\"absolute right-0 top-full z-50 mt-1 min-w-[200px] rounded-md border border-border-subtle bg-popover shadow-lg py-1\">\n          {orgs.map((org) => (\n            <button\n              key={org.id}\n              type=\"button\"\n              onClick={() => {\n                setCurrentOrgId(org.id);\n                setOpen(false);\n              }}\n              className={cn(\n                \"flex w-full items-center gap-2 px-3 py-2 text-sm text-left transition-colors hover:bg-accent\",\n                org.id === currentOrgId\n                  ? \"text-primary font-medium\"\n                  : \"text-text-primary\",\n              )}\n            >\n              <Check\n                size={13}\n                className={cn(\n                  \"flex-shrink-0\",\n                  org.id === currentOrgId\n                    ? \"opacity-100 text-primary\"\n                    : \"opacity-0\",\n                )}\n              />\n              <span className=\"truncate\">{org.name}</span>\n            </button>\n          ))}\n          {orgs.length > 0 && (\n            <div className=\"my-1 border-t border-border-subtle\" />\n          )}\n          <button\n            type=\"button\"\n            onClick={() => {\n              setOpen(false);\n              navigate?.(`${basePath ?? \"\"}${createOrgPath}`);\n            }}\n            className=\"flex w-full items-center gap-2 px-3 py-2 text-sm text-left text-primary transition-colors hover:bg-accent\"\n          >\n            <Plus size={13} className=\"flex-shrink-0\" />\n            <span className=\"truncate\">\n              {tr(\"devportal.nav.newOrganization\", \"New organization\")}\n            </span>\n          </button>\n        </div>\n      )}\n    </div>\n  );\n};\n\n/**\n * Horizontal section nav rendered above the page content on every devportal\n * route. Gives developers a one-click jump between all top-level sections so\n * routes like OAuth, Delegations, Analytics, Revenue, Docs, Resources,\n * Publisher Profile, and Settings are reachable without typing URLs.\n *\n * Renders nothing when `basePath` is undefined (standalone/dev mode) so it\n * doesn't conflict with whatever harness wraps the MFE there.\n */\nexport const SectionNav: FC = () => {\n  const { navigate, basePath } = useDevportal();\n  const { pathname } = useLocation();\n  const tr = useTr();\n\n  if (!basePath || !navigate) return null;\n\n  const handleClick = (path: string) => {\n    navigate(joinBaseAndPath(basePath, path));\n  };\n\n  return (\n    <nav\n      aria-label={tr(\"devportal.nav.sections\", \"Developer portal sections\")}\n      className=\"border-b border-border-subtle bg-bg-surface/40 px-4 py-2\"\n      data-testid=\"devportal-section-nav\"\n    >\n      <div className=\"flex items-center gap-2\">\n        <ul className=\"flex flex-1 flex-wrap gap-1\">\n          {SECTIONS.map((section) => {\n            const active = isSectionActive(pathname, basePath, section);\n            const Icon = section.icon;\n            return (\n              <li key={section.path}>\n                <button\n                  type=\"button\"\n                  onClick={() => handleClick(section.path)}\n                  aria-current={active ? \"page\" : undefined}\n                  className={cn(\n                    \"inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 text-sm font-medium transition-colors\",\n                    active\n                      ? \"bg-action-primary-bg text-action-primary-text\"\n                      : \"text-text-secondary hover:bg-accent hover:text-text-primary\",\n                  )}\n                >\n                  <Icon size={14} />\n                  <span>{tr(section.i18nKey, section.fallback)}</span>\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n        <OrgSwitcher />\n      </div>\n    </nav>\n  );\n};\n\n// Exported for unit tests that want to assert against the canonical list.\nexport const __SECTION_NAV_SECTIONS = SECTIONS;\n"],"mappings":";;;;;;;;;;;AA2IA,IAAaA,UAAwB;CACnC,IAAM,EACJ,gBACA,mBACA,wBACA,2BACA,aACA,gBACEC,EAAa,GACXC,IAAWC,EAAmB,GAC9BC,IAAeF,IAAWG,IAAsBC,GAChDC,IAAkBL,IAAWM,IAAyBC,GACtDC,IAAKC,EAAM,GACX,CAACC,GAAMC,KAAWC,EAAS,EAAK,GAChCC,IAAMC,EAAuB,IAAI,GAEjC,EAAE,YAASC,EAA2B,EAAE,aAAa,cAAc,CAAC,GAEpEC,KADqBC,GAAM,4BAA4B,CAAC,EAAA,CACzC,QAAQ,MAC3BjB,IAAWkB,EAAI,SAAS,aAAaA,EAAI,SAAS,UACpD;CAUA,AAPAC,QAAgB;EACd,AAAI,CAACjB,KAAgBc,EAAK,WAAW,KAAKA,EAAK,EAAE,EAAE,MACjDX,EAAgBW,EAAK,EAAE,CAAC,EAAE;CAE9B,GAAG;EAACA;EAAMd;EAAcG;CAAe,CAAC,GAGxCc,QAAgB;EACd,IAAMC,KAAW,MAAkB;GACjC,AAAIP,EAAI,WAAW,CAACA,EAAI,QAAQ,SAAS,EAAE,MAAc,KACvDF,EAAQ,EAAK;EAEjB;EAEA,OADID,KAAM,SAAS,iBAAiB,aAAaU,CAAO,SAC3C,SAAS,oBAAoB,aAAaA,CAAO;CAChE,GAAG,CAACV,CAAI,CAAC;CAGT,IAAMW,IADYL,EAAK,MAAM,MAAMM,EAAE,OAAOpB,CAE1C,CAAA,EAAW,SACVc,EAAK,WAAW,IACbR,EAAG,uBAAuB,iBAAiB,IAC3CA,EAAG,2BAA2B,YAAY,IAE1Ce,IAAgBC,EAAexB,GAAU,KAAK;CAEpD,OACE,kBAAC,OAAD;EAAU;EAAK,WAAU;EAAzB,UAAA,CACE,kBAAC,UAAD;GACE,MAAK;GACL,eAAeW,GAAS,MAAM,CAACc,CAAC;GAChC,WAAWC,EACT,wGACA,sEACF;GACA,cAAYlB,EAAG,2BAA2B,qBAAqB;GAPjE,UAAA;IASE,kBAACmB,GAAD;KAAW,MAAM;KAAI,WAAU;IAA8B,CAAA;IAC7D,kBAAC,QAAD;KAAM,WAAU;KAA0B,UAAAN;IAAY,CAAA;IACtD,kBAACO,GAAD;KACE,MAAM;KACN,WAAWF,EAAG,wBAAwBhB,KAAQ,YAAY;IAC3D,CAAA;GACK;EAEP,CAAA,GAAAA,KACC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACGM,EAAK,KAAK,MACT,kBAAC,UAAD;KAEE,MAAK;KACL,eAAe;MAEb,AADAX,EAAgBa,EAAI,EAAE,GACtBP,EAAQ,EAAK;KACf;KACA,WAAWe,EACT,gGACAR,EAAI,OAAOhB,IACP,6BACA,mBACN;KAZF,UAAA,CAcE,kBAAC2B,GAAD;MACE,MAAM;MACN,WAAWH,EACT,iBACAR,EAAI,OAAOhB,IACP,6BACA,WACN;KACD,CAAA,GACD,kBAAC,QAAD;MAAM,WAAU;MAAY,UAAAgB,EAAI;KAAW,CAAA,CACrC;IAvBD,GAAAA,EAAI,EAuBH,CACT;IACAF,EAAK,SAAS,KACb,kBAAC,OAAD,EAAK,WAAU,qCAAsC,CAAA;IAEvD,kBAAC,UAAD;KACE,MAAK;KACL,eAAe;MAEb,AADAL,EAAQ,EAAK,GACbmB,IAAW,GAAGC,KAAY,KAAKR,GAAe;KAChD;KACA,WAAU;KANZ,UAAA,CAQE,kBAACS,GAAD;MAAM,MAAM;MAAI,WAAU;KAAiB,CAAA,GAC3C,kBAAC,QAAD;MAAM,WAAU;MACb,UAAAxB,EAAG,iCAAiC,kBAAkB;KACnD,CAAA,CACA;;GACL;EAEJ,CAAA,CAAA;;AAET"}

package/dist/devportal/pages/TimeCampusAppletsPage.d.ts

@@ -0,0 +1,2 @@
+import { FC } from 'react';
+export declare const TimeCampusAppletsPage: FC;

package/dist/devportal/pages/TimeCampusAppletsPage.js

@@ -0,0 +1,490 @@
+import { PageLayout as e, PageSection as t } from "../components/PageLayout.js";
+import { EmptyState as n } from "../components/EmptyState.js";
+import { LoadingState as r } from "../components/LoadingState.js";
+import { StatusBadge as i } from "../components/StatusBadge.js";
+import { useDevportal as a } from "../providers/DevportalProvider.js";
+import { useTr as o } from "../utils/i18n.js";
+import { TIMECAMPUS_APPLETS_DOCS_URL as s, TIMECAMPUS_MANIFEST_DOCS_URL as c, TIMECAMPUS_SAMPLE_WIDGET_URL as l, canAddVersion as u, canEditVersion as d, canWithdrawFromMarketplace as f, errorText as p, formatDate as m, manifestForNextVersion as h, manifestText as g, marketplaceOffer as _, parseManifestText as v, starterManifest as y, versionAction as b } from "../utils/timecampusApplets.js";
+import { useDevportalAddTimeCampusAppletVersionMutation as x, useDevportalCreateTimeCampusAppletMutation as S, useDevportalSubmitTimeCampusAppletToMarketplaceMutation as C, useDevportalSubmitTimeCampusAppletVersionMutation as w, useDevportalTimeCampusAppletsQuery as T, useDevportalUpdateTimeCampusAppletVersionMutation as E, useDevportalValidateTimeCampusAppletManifestLazyQuery as D, useDevportalWithdrawTimeCampusAppletFromMarketplaceMutation as O, useDevportalWithdrawTimeCampusAppletVersionMutation as k, useMyWorkspacesQuery as A } from "../../generated/wspace-operations.js";
+import { useState as j } from "react";
+import { BookOpen as M, CheckCircle2 as N, ExternalLink as P, FilePlus2 as F, Globe as I, Pencil as L, Puzzle as R, Send as z, Undo2 as B, Upload as V } from "lucide-react";
+import { Fragment as H, jsx as U, jsxs as W } from "react/jsx-runtime";
+import { GlassCard as G } from "@burdenoff/fe-libs/ui";
+import { useSafeGatewayClient as K } from "@burdenoff/fe-libs/shared/graphql";
+// src/devportal/pages/TimeCampusAppletsPage.tsx
+var q = ["DevportalTimeCampusApplets"], J = "inline-flex items-center justify-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-1.5 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50", Y = "inline-flex items-center justify-center gap-1.5 rounded-md border border-border-subtle bg-bg-surface px-3 py-1.5 text-sm font-medium text-text-primary hover:bg-bg-surface-hover disabled:opacity-50";
+function X(e) {
+	return e.kind === "new" ? "new" : e.kind === "version" ? `version-${e.appletId}` : `edit-${e.versionId}`;
+}
+var ee = ({ target: e, initialText: t, onClose: n, onSaved: r }) => {
+	let i = o(), a = K("workspace") ?? void 0, [s, l] = j(t), [u, d] = j([]), [f, m] = j(!1), [h, { loading: g }] = D({
+		client: a,
+		fetchPolicy: "no-cache"
+	}), [_, { loading: y }] = S({
+		client: a,
+		refetchQueries: q,
+		awaitRefetchQueries: !0
+	}), [b, { loading: C }] = x({
+		client: a,
+		refetchQueries: q,
+		awaitRefetchQueries: !0
+	}), [w, { loading: T }] = E({
+		client: a,
+		refetchQueries: q,
+		awaitRefetchQueries: !0
+	}), O = y || C || T, k = () => {
+		let e = v(s);
+		return e.ok ? e.manifest : (d([e.error]), m(!1), null);
+	}, A = async () => {
+		let e = k();
+		if (e) try {
+			let { data: t } = await h({ variables: { manifest: e } }), n = t?.validateTimeCampusAppletManifest;
+			d(n?.errors ?? []), m(n?.valid === !0);
+		} catch (e) {
+			d([p(e)]), m(!1);
+		}
+	}, M = async () => {
+		let t = k();
+		if (t) try {
+			e.kind === "new" ? (await _({ variables: { manifest: t } }), r(i("devportal.timecampusApplets.registered", "Applet registered as a draft. Submit it for review when it is ready."))) : e.kind === "edit" ? (await w({ variables: {
+				versionId: e.versionId,
+				manifest: t
+			} }), r(i("devportal.timecampusApplets.versionUpdated", "Manifest saved. The version is a draft."))) : (await b({ variables: {
+				appletId: e.appletId,
+				manifest: t
+			} }), r(i("devportal.timecampusApplets.versionAdded", "New version saved as a draft.")));
+		} catch (e) {
+			d([p(e)]), m(!1);
+		}
+	}, F = e.kind === "new" ? i("devportal.timecampusApplets.registerTitle", "Register an applet") : e.kind === "edit" ? i("devportal.timecampusApplets.editVersionTitle", "Edit v{{version}} of {{name}}", {
+		name: e.appletName,
+		version: e.version
+	}) : i("devportal.timecampusApplets.newVersionTitle", "Upload a new version of {{name}}", { name: e.appletName });
+	return /* @__PURE__ */ W(G, {
+		className: "flex flex-col gap-3 p-4",
+		"data-testid": "tc-manifest-editor",
+		children: [
+			/* @__PURE__ */ W("div", {
+				className: "flex flex-wrap items-center justify-between gap-2",
+				children: [/* @__PURE__ */ U("h2", {
+					className: "text-base font-semibold text-text-primary",
+					children: F
+				}), /* @__PURE__ */ W("a", {
+					href: c,
+					target: "_blank",
+					rel: "noopener noreferrer",
+					className: "inline-flex items-center gap-1 text-sm text-primary hover:underline",
+					children: [i("devportal.timecampusApplets.manifestReference", "Manifest reference"), /* @__PURE__ */ U(P, {
+						className: "h-3.5 w-3.5",
+						"aria-hidden": "true"
+					})]
+				})]
+			}),
+			/* @__PURE__ */ W("label", {
+				className: "flex flex-col gap-1 text-sm text-text-secondary",
+				children: [i("devportal.timecampusApplets.manifestLabel", "Manifest (JSON)"), /* @__PURE__ */ U("textarea", {
+					value: s,
+					onChange: (e) => {
+						l(e.target.value), m(!1);
+					},
+					spellCheck: !1,
+					rows: 18,
+					className: "w-full rounded-md border border-border-subtle bg-bg-sunken p-3 font-mono text-xs text-text-primary focus:outline-none focus:ring-2 focus:ring-action-primary-bg",
+					"data-testid": "tc-manifest-text"
+				})]
+			}),
+			u.length > 0 && /* @__PURE__ */ U("ul", {
+				className: "list-disc space-y-1 rounded-md bg-status-error-bg-subtle py-2 pl-6 pr-3 text-xs text-status-error-text",
+				role: "alert",
+				"data-testid": "tc-manifest-problems",
+				children: u.map((e, t) => /* @__PURE__ */ U("li", { children: e }, `${t}-${e}`))
+			}),
+			f && u.length === 0 && /* @__PURE__ */ W("p", {
+				className: "flex items-center gap-1.5 text-xs text-status-success-text",
+				"data-testid": "tc-manifest-valid",
+				children: [/* @__PURE__ */ U(N, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				}), i("devportal.timecampusApplets.manifestValid", "The manifest is valid.")]
+			}),
+			/* @__PURE__ */ W("div", {
+				className: "flex flex-wrap justify-end gap-2",
+				children: [
+					/* @__PURE__ */ U("button", {
+						type: "button",
+						className: Y,
+						onClick: n,
+						children: i("devportal.cancel", "Cancel")
+					}),
+					/* @__PURE__ */ W("button", {
+						type: "button",
+						className: Y,
+						onClick: () => void A(),
+						disabled: g || O,
+						children: [/* @__PURE__ */ U(N, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), i("devportal.timecampusApplets.validate", "Validate")]
+					}),
+					/* @__PURE__ */ W("button", {
+						type: "button",
+						className: J,
+						onClick: () => void M(),
+						disabled: O,
+						"data-testid": "tc-manifest-save",
+						children: [/* @__PURE__ */ U(V, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), e.kind === "new" ? i("devportal.timecampusApplets.register", "Register applet") : i("devportal.timecampusApplets.uploadVersion", "Upload version")]
+					})
+				]
+			})
+		]
+	});
+}, te = ({ applet: e, busy: t, onNewVersion: n, onEditVersion: r, onSubmitVersion: a, onWithdrawVersion: s, onOffer: c, onWithdrawOffer: l }) => {
+	let p = o(), h = e.latestVersion, g = b(e), v = _(e), y = e.marketplace, x = y?.latestSubmission;
+	return /* @__PURE__ */ W(G, {
+		className: "flex flex-col gap-4 p-4",
+		"data-testid": `tc-applet-${e.key}`,
+		children: [/* @__PURE__ */ W("div", {
+			className: "flex flex-wrap items-start justify-between gap-3",
+			children: [/* @__PURE__ */ W("div", {
+				className: "min-w-0",
+				children: [
+					/* @__PURE__ */ W("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ U("h3", {
+							className: "text-base font-semibold text-text-primary",
+							children: e.name
+						}), /* @__PURE__ */ U(i, { status: e.status })]
+					}),
+					/* @__PURE__ */ U("p", {
+						className: "mt-0.5 font-mono text-xs text-text-tertiary",
+						children: e.key
+					}),
+					/* @__PURE__ */ U("p", {
+						className: "mt-1 text-sm text-text-secondary",
+						children: e.description
+					})
+				]
+			}), /* @__PURE__ */ W("button", {
+				type: "button",
+				className: Y,
+				onClick: n,
+				disabled: t || !u(e),
+				title: u(e) ? void 0 : p("devportal.timecampusApplets.openVersionHint", "Finish or withdraw the open version first."),
+				children: [/* @__PURE__ */ U(F, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				}), p("devportal.timecampusApplets.newVersion", "New version")]
+			})]
+		}), /* @__PURE__ */ W("div", {
+			className: "grid gap-3 md:grid-cols-2",
+			children: [/* @__PURE__ */ W("div", {
+				className: "flex flex-col gap-2 rounded-md border border-border-subtle bg-bg-sunken/40 p-3",
+				"data-testid": `tc-applet-version-${e.key}`,
+				children: [
+					/* @__PURE__ */ W("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ W("p", {
+							className: "text-sm font-medium text-text-primary",
+							children: [
+								p("devportal.timecampusApplets.latestVersion", "Latest version"),
+								" ",
+								"v",
+								h.version
+							]
+						}), /* @__PURE__ */ U(i, { status: h.status })]
+					}),
+					e.liveVersion && e.liveVersion.id !== h.id && /* @__PURE__ */ U("p", {
+						className: "text-xs text-text-secondary",
+						children: p("devportal.timecampusApplets.liveInWorkspace", "v{{version}} is live in your workspace.", { version: e.liveVersion.version })
+					}),
+					h.submittedAt && /* @__PURE__ */ W("p", {
+						className: "text-xs text-text-secondary",
+						children: [
+							p("devportal.timecampusApplets.submitted", "Submitted"),
+							" ",
+							m(h.submittedAt)
+						]
+					}),
+					h.reviewNotes && /* @__PURE__ */ W("p", {
+						className: "text-xs text-text-secondary",
+						children: [
+							/* @__PURE__ */ W("span", {
+								className: "font-medium text-text-primary",
+								children: [p("devportal.timecampusApplets.reviewNotes", "Review notes"), ":"]
+							}),
+							" ",
+							h.reviewNotes
+						]
+					}),
+					h.suspendedReason && /* @__PURE__ */ U("p", {
+						className: "text-xs text-status-warning-text",
+						children: h.suspendedReason
+					}),
+					d(e) && /* @__PURE__ */ W("button", {
+						type: "button",
+						className: Y,
+						onClick: r,
+						disabled: t,
+						"data-testid": `tc-edit-version-${e.key}`,
+						children: [/* @__PURE__ */ U(L, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), p("devportal.timecampusApplets.editManifest", "Edit manifest")]
+					}),
+					g.kind === "submit" && /* @__PURE__ */ W("button", {
+						type: "button",
+						className: J,
+						onClick: () => a(g.versionId),
+						disabled: t,
+						children: [/* @__PURE__ */ U(z, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), p("devportal.timecampusApplets.submitForReview", "Submit for review")]
+					}),
+					g.kind === "withdraw" && /* @__PURE__ */ W("button", {
+						type: "button",
+						className: Y,
+						onClick: () => s(g.versionId),
+						disabled: t,
+						children: [/* @__PURE__ */ U(B, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), p("devportal.timecampusApplets.withdrawReview", "Withdraw from review")]
+					})
+				]
+			}), /* @__PURE__ */ W("div", {
+				className: "flex flex-col gap-2 rounded-md border border-border-subtle bg-bg-sunken/40 p-3",
+				"data-testid": `tc-applet-marketplace-${e.key}`,
+				children: [
+					/* @__PURE__ */ W("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [
+							/* @__PURE__ */ U(I, {
+								className: "h-4 w-4 text-text-tertiary",
+								"aria-hidden": "true"
+							}),
+							/* @__PURE__ */ U("p", {
+								className: "text-sm font-medium text-text-primary",
+								children: p("devportal.timecampusApplets.marketplace", "Public marketplace")
+							}),
+							y ? /* @__PURE__ */ U(i, { status: y.status }) : /* @__PURE__ */ U(i, { status: "NOT_LISTED" })
+						]
+					}),
+					y?.liveSubmission && /* @__PURE__ */ U("p", {
+						className: "text-xs text-text-secondary",
+						children: p("devportal.timecampusApplets.certifiedLive", "v{{version}} is certified and live in the marketplace.", { version: y.liveSubmission.version })
+					}),
+					x && /* @__PURE__ */ W("p", {
+						className: "flex flex-wrap items-center gap-2 text-xs text-text-secondary",
+						children: [p("devportal.timecampusApplets.latestSubmission", "Latest submission v{{version}}", { version: x.version }), /* @__PURE__ */ U(i, { status: x.status })]
+					}),
+					x?.reviewNotes && /* @__PURE__ */ W("p", {
+						className: "text-xs text-text-secondary",
+						children: [
+							/* @__PURE__ */ W("span", {
+								className: "font-medium text-text-primary",
+								children: [p("devportal.timecampusApplets.certificationNotes", "Certification notes"), ":"]
+							}),
+							" ",
+							x.reviewNotes
+						]
+					}),
+					y?.suspendedReason && /* @__PURE__ */ U("p", {
+						className: "text-xs text-status-warning-text",
+						children: y.suspendedReason
+					}),
+					f(e) ? /* @__PURE__ */ W("button", {
+						type: "button",
+						className: Y,
+						onClick: l,
+						disabled: t,
+						children: [/* @__PURE__ */ U(B, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), p("devportal.timecampusApplets.withdrawSubmission", "Withdraw submission")]
+					}) : v.canOffer ? /* @__PURE__ */ W("button", {
+						type: "button",
+						className: J,
+						onClick: c,
+						disabled: t,
+						children: [/* @__PURE__ */ U(I, {
+							className: "h-4 w-4",
+							"aria-hidden": "true"
+						}), p("devportal.timecampusApplets.offer", "Offer v{{version}} to the marketplace", { version: v.version })]
+					}) : /* @__PURE__ */ U("p", {
+						className: "text-xs text-text-tertiary",
+						children: v.reason
+					})
+				]
+			})]
+		})]
+	});
+}, ne = () => {
+	let e = o(), t = [
+		{
+			href: c,
+			label: e("devportal.timecampusApplets.docsManifest", "Applet manifest reference"),
+			icon: M
+		},
+		{
+			href: l,
+			label: e("devportal.timecampusApplets.docsSample", "Sample widget (view source)"),
+			icon: R
+		},
+		{
+			href: s,
+			label: e("devportal.timecampusApplets.docsApplets", "How applets work in TimeCampus"),
+			icon: I
+		}
+	];
+	return /* @__PURE__ */ U("ul", {
+		className: "flex flex-wrap gap-2",
+		"data-testid": "tc-applet-resources",
+		children: t.map(({ href: e, label: t, icon: n }) => /* @__PURE__ */ U("li", { children: /* @__PURE__ */ W("a", {
+			href: e,
+			target: "_blank",
+			rel: "noopener noreferrer",
+			className: Y,
+			children: [
+				/* @__PURE__ */ U(n, {
+					className: "h-4 w-4",
+					"aria-hidden": "true"
+				}),
+				t,
+				/* @__PURE__ */ U(P, {
+					className: "h-3.5 w-3.5",
+					"aria-hidden": "true"
+				})
+			]
+		}) }, e))
+	});
+}, Z = () => {
+	let i = o(), { workspaceId: s } = a(), l = K("workspace"), u = l ?? void 0, d = !!s && !!l, [f, m] = j(null), _ = f && f.workspaceId === s ? f : null, v = (e, t) => {
+		s && (x(null), m({
+			target: e,
+			text: t,
+			workspaceId: s
+		}));
+	}, [b, x] = j(null), { data: S, loading: E, error: D } = T({
+		client: u,
+		skip: !d,
+		fetchPolicy: "cache-and-network"
+	}), { data: M } = A({
+		client: u,
+		skip: !d,
+		variables: { pagination: {
+			limit: 100,
+			offset: 0
+		} }
+	}), N = (M?.myWorkspaces?.items ?? []).find((e) => e.id === s)?.name ?? null, P = {
+		client: u,
+		refetchQueries: q,
+		awaitRefetchQueries: !0
+	}, [I, L] = w(P), [z, B] = k(P), [V, G] = C(P), [Y, Z] = O(P), re = L.loading || B.loading || G.loading || Z.loading, Q = async (e, t) => {
+		x(null);
+		try {
+			await e(), x({
+				tone: "success",
+				text: t
+			});
+		} catch (e) {
+			x({
+				tone: "error",
+				text: p(e)
+			});
+		}
+	}, $ = S?.timeCampusMyThirdPartyApplets ?? [];
+	return /* @__PURE__ */ W(e, {
+		title: i("devportal.timecampusApplets.title", "TimeCampus applets"),
+		description: i("devportal.timecampusApplets.description", "Build widgets for TimeCampus, publish them in your workspace and offer them to every TimeCampus workspace."),
+		purpose: i("devportal.timecampusApplets.purpose", "Register an applet from a JSON manifest, upload new versions, send each version to your workspace's reviewers, and once it is live offer it to the public marketplace. The TimeCampus platform team certifies every marketplace version before other workspaces can install it."),
+		purposeLearnMoreHref: c,
+		actions: d ? /* @__PURE__ */ W("button", {
+			type: "button",
+			className: J,
+			onClick: () => v({ kind: "new" }, y()),
+			"data-testid": "tc-register-applet",
+			children: [/* @__PURE__ */ U(F, {
+				className: "h-4 w-4",
+				"aria-hidden": "true"
+			}), i("devportal.timecampusApplets.register", "Register applet")]
+		}) : void 0,
+		children: [/* @__PURE__ */ U(t, {
+			title: i("devportal.timecampusApplets.resources", "Build an applet"),
+			children: /* @__PURE__ */ U(ne, {})
+		}), d ? /* @__PURE__ */ W(H, { children: [
+			/* @__PURE__ */ U("p", {
+				className: "text-sm text-text-secondary",
+				"data-testid": "tc-workspace",
+				children: N ? i("devportal.timecampusApplets.inWorkspace", "Your applets in {{workspace}}. Switch workspace with the context switcher.", { workspace: N }) : i("devportal.timecampusApplets.inActiveWorkspace", "Your applets in the active workspace. Switch workspace with the context switcher.")
+			}),
+			b && /* @__PURE__ */ U("p", {
+				role: b.tone === "error" ? "alert" : "status",
+				className: b.tone === "error" ? "rounded-md bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text" : "rounded-md bg-status-success-bg-subtle px-3 py-2 text-sm text-status-success-text",
+				"data-testid": "tc-feedback",
+				children: b.text
+			}),
+			_ && /* @__PURE__ */ U(ee, {
+				target: _.target,
+				initialText: _.text,
+				onClose: () => m(null),
+				onSaved: (e) => {
+					m(null), x({
+						tone: "success",
+						text: e
+					});
+				}
+			}, `${_.workspaceId}-${X(_.target)}`),
+			/* @__PURE__ */ U(t, {
+				title: i("devportal.timecampusApplets.yourApplets", "Your applets"),
+				"data-testid": "tc-applet-list",
+				children: E && $.length === 0 ? /* @__PURE__ */ U(r, { message: i("devportal.timecampusApplets.loading", "Loading your applets...") }) : D && $.length === 0 ? /* @__PURE__ */ U("p", {
+					role: "alert",
+					className: "rounded-md bg-status-error-bg-subtle px-3 py-2 text-sm text-status-error-text",
+					children: p(D)
+				}) : $.length === 0 ? /* @__PURE__ */ U(n, {
+					icon: /* @__PURE__ */ U(R, {
+						className: "h-8 w-8",
+						"aria-hidden": "true"
+					}),
+					title: i("devportal.timecampusApplets.emptyTitle", "No applets yet"),
+					description: i("devportal.timecampusApplets.empty", "Register your first applet. The starter manifest points at the sample widget, so it validates as is.")
+				}) : /* @__PURE__ */ U("div", {
+					className: "flex flex-col gap-4",
+					children: $.map((e) => /* @__PURE__ */ U(te, {
+						applet: e,
+						busy: re,
+						onNewVersion: () => v({
+							kind: "version",
+							appletId: e.id,
+							appletName: e.name
+						}, h(e.latestVersion.manifest)),
+						onEditVersion: () => v({
+							kind: "edit",
+							versionId: e.latestVersion.id,
+							appletName: e.name,
+							version: e.latestVersion.version
+						}, g(e.latestVersion.manifest)),
+						onSubmitVersion: (e) => void Q(() => I({ variables: { versionId: e } }), i("devportal.timecampusApplets.submittedForReview", "Sent to your workspace's reviewers.")),
+						onWithdrawVersion: (e) => void Q(() => z({ variables: { versionId: e } }), i("devportal.timecampusApplets.withdrawnFromReview", "Withdrawn from review. The version is a draft again.")),
+						onOffer: () => void Q(() => V({ variables: { appletId: e.id } }), i("devportal.timecampusApplets.offered", "Sent to the TimeCampus platform team for certification.")),
+						onWithdrawOffer: () => void Q(() => Y({ variables: { appletId: e.id } }), i("devportal.timecampusApplets.offerWithdrawn", "Marketplace submission withdrawn."))
+					}, e.id))
+				})
+			})
+		] }) : /* @__PURE__ */ U(n, {
+			icon: /* @__PURE__ */ U(R, {
+				className: "h-8 w-8",
+				"aria-hidden": "true"
+			}),
+			title: i("devportal.timecampusApplets.noWorkspaceTitle", "Choose a workspace"),
+			description: i("devportal.timecampusApplets.noWorkspace", "TimeCampus applets belong to a workspace. Pick the workspace you develop in with the context switcher at the top of the page.")
+		})]
+	});
+};
+export { Z as TimeCampusAppletsPage };
+
+//# sourceMappingURL=TimeCampusAppletsPage.js.map