@flamingo-stack/openframe-frontend-core 0.0.679 → 0.0.680

package/dist/{chunk-CDMZOXS7.js → chunk-C5RRTWYW.js}

@@ -4,10 +4,10 @@ import {
   getOSLabel,
   getShellLabel,
   getToolLabel
-} from "./chunk-ZRN244JV.js";
+} from "./chunk-WTNFYZB6.js";
 import {
   useOnboardingState
-} from "./chunk-CTF5IQQZ.js";
+} from "./chunk-BGHQW5D5.js";
 import {
   SECTION_HEADING_CLASS
 } from "./chunk-FQDHQNSU.js";
@@ -429,9 +429,11 @@ function OnboardingStepCard({
 
 // src/components/shared/onboarding/onboarding-walkthrough.tsx
 import React2, { useRef, useCallback } from "react";
-import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
 function OnboardingWalkthrough({
   steps,
+  title = "Get Started",
+  renderDismissed,
   onDismiss,
   storageKey = "openframe-onboarding-state",
   className,
@@ -444,6 +446,7 @@ function OnboardingWalkthrough({
     markComplete,
     markSkipped,
     dismissOnboarding,
+    resetOnboarding,
     isStepComplete,
     isStepSkipped,
     allStepsComplete,
@@ -459,7 +462,8 @@ function OnboardingWalkthrough({
       return;
     }
     if (!completionStatus) return;
-    const statusKey = JSON.stringify(completionStatus);
+    const isFreshState = state.completedSteps.length === 0 && state.skippedSteps.length === 0;
+    const statusKey = `${JSON.stringify(completionStatus)}|${isFreshState ? state.lastUpdated : ""}`;
     if (lastCompletionStatusRef.current === statusKey) return;
     if (autoMarkingInProgressRef.current) return;
     const completedStepIds = Object.entries(completionStatus).filter(([stepId, isComplete]) => {
@@ -468,7 +472,6 @@ function OnboardingWalkthrough({
     }).map(([stepId]) => stepId);
     if (completedStepIds.length > 0) {
       autoMarkingInProgressRef.current = true;
-      console.log("\u{1F4CA} Auto-marking steps as complete from hook data:", completedStepIds);
       markMultipleComplete(completedStepIds);
       lastCompletionStatusRef.current = statusKey;
       setTimeout(() => {
@@ -477,29 +480,32 @@ function OnboardingWalkthrough({
     } else {
       lastCompletionStatusRef.current = statusKey;
     }
-  }, [completionStatus, isLoadingCompletion, state.completedSteps, markMultipleComplete]);
+  }, [
+    completionStatus,
+    isLoadingCompletion,
+    state.completedSteps,
+    state.skippedSteps,
+    state.lastUpdated,
+    markMultipleComplete
+  ]);
   const handleStepAction = useCallback(
     async (step) => {
       if (actionInProgressRef.current.has(step.id)) {
-        console.log(`\u23F3 Action already in progress for "${step.id}", skipping`);
         return;
       }
       actionInProgressRef.current.add(step.id);
       try {
         await step.onAction();
         if (state.completedSteps.includes(step.id)) {
-          console.log(`\u2713 Step "${step.id}" already completed, skipping mark`);
           return;
         }
         if (step.id === "knowledge-base") {
-          console.log(`\u{1F3AF} Auto-completing Knowledge Base`);
           markComplete(step.id);
           return;
         }
         if (step.checkComplete) {
           try {
             const isComplete = await step.checkComplete();
-            console.log(`\u{1F50D} Post-action check for "${step.id}": isComplete=${isComplete}`);
             if (isComplete && !state.completedSteps.includes(step.id)) {
               markComplete(step.id);
             }
@@ -522,12 +528,12 @@ function OnboardingWalkthrough({
     onDismiss?.();
   };
   if (state.dismissed) {
-    return null;
+    return renderDismissed ? /* @__PURE__ */ jsx9(Fragment2, { children: renderDismissed(resetOnboarding) }) : null;
   }
   const isAllComplete = allStepsComplete(steps);
   return /* @__PURE__ */ jsxs9("div", { className: cn("w-full space-y-4", className), children: [
     /* @__PURE__ */ jsxs9("div", { className: "flex flex-col items-start justify-between gap-3 md:flex-row md:items-center md:gap-0", children: [
-      /* @__PURE__ */ jsx9("h2", { className: SECTION_HEADING_CLASS, children: "Get Started" }),
+      /* @__PURE__ */ jsx9("h2", { className: SECTION_HEADING_CLASS, children: title }),
       isLoadingCompletion ? /* @__PURE__ */ jsx9("div", { className: "h-[48px] w-full animate-pulse rounded-[6px] bg-ods-border md:w-[160px]" }) : isAllComplete ? /* @__PURE__ */ jsx9(Button, { variant: "accent", onClick: handleDismiss, className: "w-full md:w-auto", children: "Close Onboarding" }) : /* @__PURE__ */ jsx9(Button, { variant: "outline", onClick: handleDismiss, className: "w-full md:w-auto", children: "Skip Onboarding" })
     ] }),
     /* @__PURE__ */ jsx9("div", { className: cn(spacing), children: steps.map((step) => /* @__PURE__ */ jsx9(
@@ -556,4 +562,4 @@ export {
   OnboardingStepCard,
   OnboardingWalkthrough
 };
-//# sourceMappingURL=chunk-CDMZOXS7.js.map
+//# sourceMappingURL=chunk-C5RRTWYW.js.map

package/dist/{chunk-CDMZOXS7.js.map → chunk-C5RRTWYW.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/platform/SoftwareInfo.tsx","../src/components/platform/SoftwareSourceBadge.tsx","../src/components/platform/CveLink.tsx","../src/components/platform/ToolBadge.tsx","../src/components/platform/ShellTypeBadge.tsx","../src/components/platform/ScriptInfoSection.tsx","../src/components/platform/ScriptArguments.tsx","../src/components/shared/onboarding/onboarding-step-card.tsx","../src/components/shared/onboarding/onboarding-walkthrough.tsx"],"sourcesContent":["/**\n * SoftwareInfo Component\n *\n * Displays software name with optional vendor information below it.\n * Part of the ODS (OpenFrame Design System) platform components.\n *\n * @example\n * ```tsx\n * <SoftwareInfo name=\"Visual Studio Code\" vendor=\"Microsoft\" />\n * <SoftwareInfo name=\"Chrome\" /> // Without vendor\n * ```\n */\n\nimport type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SoftwareInfoProps {\n  /** Software name (required) */\n  name: string;\n  /** Software vendor (optional) */\n  vendor?: string;\n  /** Software version (optional) */\n  version?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport const SoftwareInfo: React.FC<SoftwareInfoProps> = ({ name, vendor, version, className }) => {\n  return (\n    <div className={cn('flex flex-col gap-1', className)}>\n      <div className=\"flex items-center gap-2\">\n        <div className=\"text-ods-text-primary text-h4\">{name}</div>\n        {version && (\n          <div className=\"rounded bg-ods-bg-surface px-2 py-1 text-ods-text-secondary text-h6\">{version}</div>\n        )}\n      </div>\n      {vendor && <div className=\"text-ods-text-secondary text-h6\">{vendor}</div>}\n    </div>\n  );\n};\n\nSoftwareInfo.displayName = 'SoftwareInfo';\n","/**\n * SoftwareSourceBadge Component\n *\n * Displays a badge for software source types from Fleet MDM.\n * Supports all osquery software source types with appropriate styling.\n *\n * Fleet MDM Software Sources:\n * - apps: macOS Applications\n * - chrome_extensions: Chrome Browser Extensions\n * - firefox_addons: Firefox Browser Extensions\n * - safari_extensions: Safari Browser Extensions\n * - ie_extensions: Internet Explorer Extensions\n * - vscode_extensions: VS Code Extensions\n * - atom_packages: Atom Packages\n * - homebrew_packages: Homebrew Packages (macOS)\n * - npm_packages: NPM Packages\n * - python_packages: Python Packages\n * - apt_sources: APT Packages (Debian/Ubuntu)\n * - deb_packages: DEB Packages\n * - rpm_packages: RPM Packages (Red Hat/CentOS)\n * - yum_sources: YUM Packages\n * - portage_packages: Portage Packages (Gentoo)\n * - chocolatey_packages: Chocolatey Packages (Windows)\n * - programs: Windows Programs\n * - pkg_packages: PKG Packages\n *\n * @example\n * ```tsx\n * <SoftwareSourceBadge source=\"apps\" />\n * <SoftwareSourceBadge source=\"chrome_extensions\" />\n * <SoftwareSourceBadge source=\"python_packages\" />\n * ```\n */\n\nimport type React from 'react';\nimport { cn } from '../../utils/common';\nimport { PackageIcon, WindowsIcon, MacOSIcon, LinuxIcon } from '../icons';\n\nexport type SoftwareSource =\n  | 'apps'\n  | 'chrome_extensions'\n  | 'firefox_addons'\n  | 'safari_extensions'\n  | 'ie_extensions'\n  | 'vscode_extensions'\n  | 'atom_packages'\n  | 'homebrew_packages'\n  | 'npm_packages'\n  | 'python_packages'\n  | 'apt_sources'\n  | 'deb_packages'\n  | 'rpm_packages'\n  | 'yum_sources'\n  | 'portage_packages'\n  | 'chocolatey_packages'\n  | 'programs'\n  | 'pkg_packages';\n\nexport interface SoftwareSourceBadgeProps {\n  /** Software source type from Fleet MDM */\n  source: SoftwareSource;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Maps source types to human-readable labels and icons\n */\nconst sourceConfig: Record<SoftwareSource, { label: string; icon: React.ReactNode }> = {\n  apps: { label: 'App', icon: <MacOSIcon className=\"h-4 w-4\" /> },\n  chrome_extensions: { label: 'Chrome', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  firefox_addons: { label: 'Firefox', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  safari_extensions: { label: 'Safari', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  ie_extensions: { label: 'IE', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  vscode_extensions: { label: 'VS Code', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  atom_packages: { label: 'Atom', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  homebrew_packages: { label: 'Homebrew', icon: <MacOSIcon className=\"h-4 w-4\" /> },\n  npm_packages: { label: 'NPM', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  python_packages: { label: 'Python', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  apt_sources: { label: 'APT', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  deb_packages: { label: 'DEB', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  rpm_packages: { label: 'RPM', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  yum_sources: { label: 'YUM', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  portage_packages: { label: 'Portage', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  chocolatey_packages: { label: 'Chocolatey', icon: <WindowsIcon className=\"h-4 w-4\" /> },\n  programs: { label: 'Windows', icon: <WindowsIcon className=\"h-4 w-4\" /> },\n  pkg_packages: { label: 'PKG', icon: <PackageIcon className=\"h-4 w-4\" /> },\n};\n\nexport const SoftwareSourceBadge: React.FC<SoftwareSourceBadgeProps> = ({ source, className }) => {\n  const config = sourceConfig[source] || { label: source, icon: <PackageIcon className=\"h-4 w-4\" /> };\n\n  return (\n    <span className={cn('inline-flex items-center gap-2 text-ods-text-primary', className)}>\n      {config.icon}\n      {config.label}\n    </span>\n  );\n};\n\nSoftwareSourceBadge.displayName = 'SoftwareSourceBadge';\n","/**\n * CveLink Component\n *\n * Displays a CVE ID with an external link icon that links to the NIST NVD database.\n * Part of the ODS (OpenFrame Design System) platform components.\n *\n * @example\n * ```tsx\n * <CveLink cveId=\"CVE-2024-1234\" />\n * ```\n */\n\nimport type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { CustomExternalLinkIcon } from '../icons';\n\nexport interface CveLinkProps {\n  /** CVE ID (e.g., \"CVE-2024-1234\") */\n  cveId: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport const CveLink: React.FC<CveLinkProps> = ({ cveId, className }) => {\n  const nistUrl = `https://nvd.nist.gov/vuln/detail/${cveId}`;\n\n  return (\n    <a\n      href={nistUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\n        'group inline-flex items-center gap-2 text-ods-text-primary transition-colors text-code hover:text-ods-accent',\n        className,\n      )}\n    >\n      <span>{cveId}</span>\n      <CustomExternalLinkIcon className=\"h-4 w-4 text-ods-text-secondary transition-colors group-hover:text-ods-accent\" />\n    </a>\n  );\n};\n\nCveLink.displayName = 'CveLink';\n","/**\n * ToolBadge Component\n *\n * Displays a tool type badge with icon for OpenFrame integrated tools.\n * Used in tables to show tool sources like Fleet MDM, MeshCentral, etc.\n *\n * @example\n * ```tsx\n * <ToolBadge toolType=\"OPENFRAME_RMM\" />\n * <ToolBadge toolType=\"FLEET\" />\n * <ToolBadge toolType=\"MESHCENTRAL\" />\n * ```\n */\n\nimport type React from 'react';\nimport type { ToolType } from '../../types/tool.types';\nimport { cn } from '../../utils/cn';\nimport { getToolLabel } from '../../utils/tool-utils';\nimport { ToolIcon } from '../tool-icon';\n\nexport type { ToolType } from '../../types/tool.types';\n\nexport interface ToolBadgeProps {\n  /** Tool type */\n  toolType: ToolType;\n  /** Additional CSS classes */\n  className?: string;\n  iconClassName?: string;\n}\n\nexport const ToolBadge: React.FC<ToolBadgeProps> = ({ toolType, className, iconClassName }) => {\n  const label = getToolLabel(toolType);\n\n  return (\n    <div className={cn('flex items-center gap-1 text-ods-text-secondary', className)}>\n      <ToolIcon toolType={toolType} className={iconClassName} size={16} />\n      <span className=\"text-ods-text-primary text-h4\">{label}</span>\n    </div>\n  );\n};\n\nToolBadge.displayName = 'ToolBadge';\n","/**\n * ShellTypeBadge Component\n *\n * Displays a badge for shell/script types with appropriate icon and label.\n * Supports all RMM shell types.\n */\n\nimport type React from 'react';\nimport { type ShellType, ShellTypeValues } from '../../types/shell.types';\nimport { cn } from '../../utils/cn';\nimport { getShellLabel } from '../../utils/shell-utils';\nimport { BashIcon, CmdIcon, DenoIcon, NushellIcon, ShellIcon } from '../icons';\nimport { PowershellLogoGreyIcon } from '../icons-v2-generated/brand-logos/powershell-logo-grey-icon';\nimport { PythonLogoIcon } from '../icons-v2-generated/brand-logos/python-logo-icon';\n\n/**\n * Shell icon configuration with typed mapping\n */\ninterface ShellIconConfig {\n  icon: React.ComponentType<{ size?: number; color?: string; className?: string }>;\n  props: { size: number } & ({ className: string } | { color: string });\n}\n\n/**\n * Typed mapping of shell types to their icon configurations\n * Using Record<ShellType, ...> ensures all shell types are covered\n */\nconst shellIconMap: Record<ShellType, ShellIconConfig> = {\n  [ShellTypeValues.POWERSHELL]: {\n    icon: PowershellLogoGreyIcon,\n    props: { size: 16, className: 'text-ods-text-secondary' },\n  },\n  [ShellTypeValues.CMD]: {\n    icon: CmdIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.BASH]: {\n    icon: BashIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.PYTHON]: {\n    icon: PythonLogoIcon,\n    props: { size: 16, className: 'text-ods-text-secondary' },\n  },\n  [ShellTypeValues.NUSHELL]: {\n    icon: NushellIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.DENO]: {\n    icon: DenoIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.SHELL]: {\n    icon: ShellIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n} as const;\n\nconst defaultIconConfig: ShellIconConfig = {\n  icon: ShellIcon,\n  props: { size: 16, color: 'var(--color-text-secondary)' },\n};\n\nexport interface ShellTypeBadgeProps {\n  shellType: ShellType;\n  className?: string;\n  iconClassName?: string;\n}\n\nexport const ShellTypeBadge: React.FC<ShellTypeBadgeProps> = ({ shellType, className, iconClassName }) => {\n  const normalizedType = shellType?.toUpperCase() as ShellType;\n  const label = getShellLabel(normalizedType);\n  const { icon: IconComponent, props: iconProps } = shellIconMap[normalizedType] ?? defaultIconConfig;\n  const defaultIconClassName = 'className' in iconProps ? iconProps.className : undefined;\n\n  return (\n    <div className={cn('flex items-center gap-1', className)}>\n      <IconComponent size={16} className={cn(defaultIconClassName, iconClassName)} />\n      <span className=\"text-ods-text-primary text-h4\">{label}</span>\n    </div>\n  );\n};\n\nShellTypeBadge.displayName = 'ShellTypeBadge';\n","/**\n * ScriptInfoSection Component\n *\n * Displays script information in a card with header (title, description)\n * and detail cells (shell type, supported platforms, category, author).\n * Responsive layout: stacks cells on mobile, shows grid on desktop.\n */\n\nimport type React from 'react';\nimport Image from '../../embed-shims/next-image';\nimport { cn } from '../../utils/cn';\nimport { nameInitials } from '../../utils/format';\nimport { getOSLabel } from '../../utils/os-utils';\nimport { getShellLabel } from '../../utils/shell-utils';\n\n/**\n * Props for author avatar display\n */\nexport interface ScriptAuthor {\n  /** Author name */\n  name: string;\n  /** Author initials (used when no photo) */\n  initials?: string;\n  /** URL to author's photo */\n  photoUrl?: string;\n}\n\n/**\n * Props for ScriptInfoSection component\n */\nexport interface ScriptInfoSectionProps {\n  /** Script title/name */\n  headline: string;\n  /** Script description */\n  subheadline?: string;\n  /** Shell type (POWERSHELL, BASH, CMD, etc.) */\n  shellType?: string;\n  /** Array of supported platform strings (windows, darwin, linux, etc.) */\n  supportedPlatforms?: string[];\n  /** Script category */\n  category: string;\n  /** Author information */\n  author?: ScriptAuthor;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Formats supported platforms array into a display string\n * @param platforms - Array of platform strings (e.g., ['windows', 'darwin', 'linux'])\n * @returns Formatted string (e.g., 'Windows, macOS, Linux')\n */\nfunction formatSupportedPlatforms(platforms?: string[]): string {\n  if (!platforms || platforms.length === 0) {\n    return 'All Platforms';\n  }\n  return platforms.map(platform => getOSLabel(platform)).join(', ');\n}\n\n/**\n * InfoCell - Single info cell with label and value\n */\ninterface InfoCellProps {\n  label: string;\n  value: string;\n  avatar?: ScriptAuthor;\n  className?: string;\n}\n\nfunction InfoCell({ label, value, avatar, className }: InfoCellProps) {\n  return (\n    <div className={cn('flex min-w-0 items-center gap-2', className)}>\n      {/* Avatar for author cell */}\n      {avatar && (\n        <div className=\"relative size-8 shrink-0 overflow-hidden rounded-full border border-ods-border bg-ods-bg\">\n          {avatar.photoUrl ? (\n            <Image src={avatar.photoUrl} alt={avatar.name} className=\"object-cover\" fill sizes=\"32px\" unoptimized />\n          ) : (\n            <div className=\"flex size-full items-center justify-center text-ods-text-secondary text-h6\">\n              {avatar.initials || nameInitials(avatar.name)}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Text content */}\n      <div className=\"flex min-w-0 flex-col\">\n        <span className=\"truncate text-ods-text-primary text-h4\" title={value}>\n          {value}\n        </span>\n        <span className=\"truncate text-ods-text-secondary text-h6\">{label}</span>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ScriptInfoSection - Displays script information in a structured card\n *\n * @example\n * ```tsx\n * <ScriptInfoSection\n *   title=\"System Backup Script\"\n *   description=\"Comprehensive Linux system backup script...\"\n *   shellType=\"BASH\"\n *   supportedPlatforms={['linux']}\n *   category=\"System Maintenance\"\n *   author={{ name: 'John Doe', photoUrl: '/avatars/john.jpg' }}\n * />\n * ```\n */\nexport const ScriptInfoSection: React.FC<ScriptInfoSectionProps> = ({\n  headline,\n  subheadline,\n  shellType,\n  supportedPlatforms,\n  category,\n  author,\n  className,\n}) => {\n  const shellLabel = getShellLabel(shellType);\n  const platformsLabel = formatSupportedPlatforms(supportedPlatforms);\n\n  return (\n    <div className={cn('overflow-hidden rounded-[6px] border border-ods-border bg-ods-card', className)}>\n      {/* Header row with title and description */}\n      <div className=\"border-b border-ods-border p-4\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 className=\"text-ods-text-primary text-h4\">{headline}</h3>\n          {subheadline && <p className=\"break-words text-ods-text-secondary text-h6\">{subheadline}</p>}\n        </div>\n      </div>\n\n      {/* Details section with info cells\n          - Mobile/Tablet (<lg): 2x2 grid with divider between rows\n          - Desktop (lg+): 4 columns in single row\n      */}\n      {/* First row: Shell Type, Supported Platforms */}\n      <div className=\"grid grid-cols-2 gap-4 border-b border-ods-border px-4 py-4 lg:grid-cols-4 lg:border-b-0\">\n        <InfoCell label=\"Shell Type\" value={shellLabel} />\n        <InfoCell label=\"Supported Platforms\" value={platformsLabel} />\n        {/* Desktop only: Category and Author in same row */}\n        <InfoCell label=\"Category\" value={category} className=\"hidden lg:flex\" />\n        {author && <InfoCell label=\"Added by\" value={author.name} avatar={author} className=\"hidden lg:flex\" />}\n      </div>\n      {/* Second row (mobile/tablet only): Category, Author */}\n      <div className=\"grid grid-cols-2 gap-4 px-4 py-4 lg:hidden\">\n        <InfoCell label=\"Category\" value={category} />\n        {author && <InfoCell label=\"Added by\" value={author.name} avatar={author} />}\n      </div>\n    </div>\n  );\n};\n\nScriptInfoSection.displayName = 'ScriptInfoSection';\n","/**\n * ScriptArguments Component\n *\n * Displays and manages script arguments as key-value pairs.\n * Each argument has a name (key) and value input field with delete button.\n * Includes an \"Add Script Argument\" button to add new entries.\n */\n\nimport { Trash2 } from 'lucide-react';\nimport type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { LockIcon, PlusCircleIcon } from '../icons-v2-generated';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\n/**\n * What an untouched stored secret shows in its value field.\n *\n * Rendered as the field's PLACEHOLDER, never as its value: a mask held in\n * `value` is indistinguishable from something the user typed, and would be\n * submitted back as the secret itself.\n */\nconst SECRET_MASK = '**********';\n\nconst STORED_SECRET_KEY_HINT = \"A stored secret can't be renamed — delete it and add a new one\";\n\n/**\n * Single script argument with key and value\n */\nexport interface ScriptArgument {\n  /** Unique identifier for the argument */\n  id: string;\n  /** Argument name/key */\n  key: string;\n  /** Argument value (empty string for flag-type arguments) */\n  value: string;\n  /**\n   * A secret pair: the key carries a lock and the value is typed as a password.\n   * Meaningful for environment variables only.\n   */\n  secret?: boolean;\n  /**\n   * The server holds a value for this secret and does not send it back. While\n   * `value` is empty the field shows a mask, so empty means \"keep what is\n   * stored\" and typing replaces it.\n   *\n   * The stored value is bound to the key, which is therefore read-only:\n   * renaming would leave the old name holding the secret and the new one\n   * holding nothing.\n   */\n  hasStoredValue?: boolean;\n}\n\n/**\n * Props for ScriptArguments component\n */\nexport interface ScriptArgumentsProps {\n  /** Array of script arguments */\n  arguments: ScriptArgument[];\n  /** Callback when arguments change */\n  onArgumentsChange?: (args: ScriptArgument[]) => void;\n  /** Placeholder for key input */\n  keyPlaceholder?: string;\n  /** Placeholder for value input */\n  valuePlaceholder?: string;\n  /** Label for the add button */\n  addButtonLabel?: string;\n  /** Label for a second add button that appends a secret pair. Omit to not offer secrets. */\n  addSecretButtonLabel?: string;\n  /** Whether the component is disabled */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label for the title input */\n  titleLabel: string;\n}\n\n/**\n * ScriptArguments - Displays and manages script arguments\n *\n * @example\n * ```tsx\n * <ScriptArguments\n *   arguments={[\n *     { id: '1', key: 'port', value: '3000' },\n *     { id: '2', key: 'verbose', value: '' },\n *   ]}\n *   onArgumentsChange={(args) => setArguments(args)}\n * />\n * ```\n */\nexport const ScriptArguments: React.FC<ScriptArgumentsProps> = ({\n  arguments: args,\n  onArgumentsChange,\n  keyPlaceholder = 'Enter Key',\n  valuePlaceholder = 'Enter Value (empty=flag)',\n  addButtonLabel = 'Add Script Argument',\n  addSecretButtonLabel,\n  disabled = false,\n  className,\n  titleLabel,\n}) => {\n  const handleKeyChange = (id: string, newKey: string) => {\n    if (!onArgumentsChange) return;\n    const updated = args.map(arg => (arg.id === id ? { ...arg, key: newKey } : arg));\n    onArgumentsChange(updated);\n  };\n\n  const handleValueChange = (id: string, newValue: string) => {\n    if (!onArgumentsChange) return;\n    const updated = args.map(arg => (arg.id === id ? { ...arg, value: newValue } : arg));\n    onArgumentsChange(updated);\n  };\n\n  const handleDelete = (id: string) => {\n    if (!onArgumentsChange) return;\n    const updated = args.filter(arg => arg.id !== id);\n    onArgumentsChange(updated);\n  };\n\n  const handleAdd = (secret = false) => {\n    if (!onArgumentsChange) return;\n    const newArg: ScriptArgument = {\n      id: crypto.randomUUID(),\n      key: '',\n      value: '',\n      // Only set on a secret, so a plain pair keeps the shape it always had.\n      ...(secret && { secret: true }),\n    };\n    onArgumentsChange([...args, newArg]);\n  };\n\n  const isFirstRow = (index: number) => index === 0;\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {args.map((arg, index) => {\n        const isStoredSecret = Boolean(arg.secret && arg.hasStoredValue);\n        // The mask stands for the stored value, so it goes once the user types a replacement.\n        const showsMask = isStoredSecret && !arg.value;\n\n        return (\n          <div key={arg.id} className=\"flex w-full items-end gap-2\">\n            {/* Key input - with label only on first row */}\n            <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              {isFirstRow(index) && <Label spacing=\"tight\">{titleLabel}</Label>}\n              <Input\n                value={arg.key}\n                onChange={e => handleKeyChange(arg.id, e.target.value)}\n                placeholder={keyPlaceholder}\n                disabled={disabled}\n                readOnly={isStoredSecret}\n                title={isStoredSecret ? STORED_SECRET_KEY_HINT : undefined}\n                startAdornment={arg.secret ? <LockIcon role=\"img\" aria-label=\"Secret\" /> : undefined}\n              />\n            </div>\n\n            {/* Value input with delete button */}\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                <Input\n                  // `new-password` keeps a password manager from filling a saved login into a secret.\n                  type={arg.secret ? 'password' : undefined}\n                  autoComplete={arg.secret ? 'new-password' : undefined}\n                  value={arg.value}\n                  onChange={e => handleValueChange(arg.id, e.target.value)}\n                  placeholder={showsMask ? SECRET_MASK : valuePlaceholder}\n                  disabled={disabled}\n                  className={cn(\n                    !arg.value && 'placeholder:text-ods-text-muted',\n                    // The mask reads as a value that is there, not as a prompt to fill one in.\n                    showsMask && '[&_input]:placeholder:text-ods-text-primary',\n                  )}\n                />\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"icon\"\n                onClick={() => handleDelete(arg.id)}\n                disabled={disabled}\n                aria-label=\"Delete argument\"\n                leftIcon={<Trash2 className=\"size-4 md:size-6\" color=\"var(--color-error)\" />}\n              />\n            </div>\n          </div>\n        );\n      })}\n\n      {/* Add buttons - aligned left */}\n      <div className=\"flex flex-wrap justify-start gap-[var(--spacing-system-xs)]\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"small\"\n          onClick={() => handleAdd()}\n          disabled={disabled}\n          className=\"self-start\"\n          leftIcon={<PlusCircleIcon className=\"text-ods-text-secondary\" />}\n        >\n          {addButtonLabel}\n        </Button>\n        {addSecretButtonLabel && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"small\"\n            onClick={() => handleAdd(true)}\n            disabled={disabled}\n            className=\"self-start\"\n            leftIcon={<LockIcon className=\"text-ods-text-secondary\" />}\n          >\n            {addSecretButtonLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nScriptArguments.displayName = 'ScriptArguments';\n","'use client';\n\nimport React from 'react';\nimport { cn } from '../../../utils/cn';\nimport { Button } from '../../ui/button';\nimport { InteractiveCard } from '../../ui/interactive-card';\nimport { StatusBadge } from '../../ui/status-badge';\n\nexport interface OnboardingStepCardProps {\n  step: {\n    id: string;\n    title: string;\n    description: string;\n    actionIcon: (color?: string) => React.ReactNode;\n    actionText: string;\n    completedText: string;\n    onAction: () => void | Promise<void>;\n    onSkip?: () => void;\n  };\n  isCompleted: boolean;\n  isSkipped: boolean;\n  isCheckingCompletion: boolean;\n  onAction: () => void | Promise<void>;\n  onSkip: () => void;\n  className?: string;\n}\n\nexport function OnboardingStepCard({\n  step,\n  isCompleted,\n  isSkipped,\n  isCheckingCompletion,\n  onAction,\n  onSkip,\n  className,\n}: OnboardingStepCardProps) {\n  const [isProcessing, setIsProcessing] = React.useState(false);\n\n  const handleAction = async (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setIsProcessing(true);\n    try {\n      await onAction();\n    } finally {\n      setIsProcessing(false);\n    }\n  };\n\n  const handleSkip = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onSkip();\n  };\n\n  return (\n    <InteractiveCard\n      clickable={false}\n      className={cn(\n        'rounded-[6px] border border-ods-border bg-ods-card',\n        'flex flex-col md:flex-row',\n        'min-h-[80px] md:h-[80px]',\n        'items-start md:items-center',\n        'gap-3 md:gap-4',\n        'px-4 py-4 md:py-0',\n        className,\n      )}\n    >\n      {/* Left column - content */}\n      <div className=\"flex w-full min-w-0 flex-1 flex-col justify-center gap-1 md:w-auto\">\n        <h3 className=\"truncate text-ods-text-primary text-h4\" title={step.title}>\n          {step.title}\n        </h3>\n        <p className=\"h-[20px] truncate text-ods-text-secondary text-h6\" title={step.description}>\n          {step.description}\n        </p>\n      </div>\n\n      {/* Right column - action buttons, completed badge, or skipped badge */}\n      <div\n        className=\"flex w-full shrink-0 items-center justify-start gap-2 md:w-auto md:justify-end\"\n        onClick={e => e.stopPropagation()}\n      >\n        {isCheckingCompletion ? (\n          <>\n            <div className=\"h-[32px] w-[100px] animate-pulse rounded-[6px] bg-ods-border\" />\n            <div className=\"h-[32px] w-[120px] animate-pulse rounded-[6px] bg-ods-border\" />\n          </>\n        ) : isCompleted ? (\n          <>\n            <StatusBadge text=\"COMPLETED\" variant=\"card\" colorScheme=\"success\" />\n            <Button\n              variant=\"outline\"\n              onClick={handleAction}\n              disabled={isProcessing}\n              leftIcon={step.actionIcon('white')}\n            >\n              {step.completedText}\n            </Button>\n          </>\n        ) : isSkipped ? (\n          <>\n            <StatusBadge text=\"SKIPPED\" variant=\"card\" colorScheme=\"default\" />\n          </>\n        ) : (\n          <>\n            <Button variant=\"outline\" onClick={handleSkip}>\n              Skip Step\n            </Button>\n            <Button variant=\"accent\" onClick={handleAction} disabled={isProcessing} leftIcon={step.actionIcon('black')}>\n              {step.actionText}\n            </Button>\n          </>\n        )}\n      </div>\n    </InteractiveCard>\n  );\n}\n","'use client';\n\nimport React, { useRef, useCallback } from 'react';\nimport { useOnboardingState, type OnboardingStepConfig } from '../../../hooks/ui/use-onboarding-state';\nimport { cn } from '../../../utils/cn';\nimport { SECTION_HEADING_CLASS } from '../../layout/page-heading';\nimport { Button } from '../../ui/button';\nimport { OnboardingStepCard } from './onboarding-step-card';\n\nexport interface OnboardingWalkthroughProps {\n  steps: OnboardingStepConfig[];\n  onDismiss?: () => void;\n  storageKey?: string;\n  className?: string;\n  spacing?: string;\n  /**\n   * Completion status from hook-based checks (e.g., useOnboardingCompletion)\n   * Object mapping step IDs to boolean completion status\n   */\n  completionStatus?: Record<string, boolean>;\n  /**\n   * Whether completion checks are still loading\n   */\n  isLoadingCompletion?: boolean;\n}\n\nexport function OnboardingWalkthrough({\n  steps,\n  onDismiss,\n  storageKey = 'openframe-onboarding-state',\n  className,\n  spacing = 'space-y-4',\n  completionStatus,\n  isLoadingCompletion = false,\n}: OnboardingWalkthroughProps) {\n  const {\n    state,\n    markComplete,\n    markSkipped,\n    dismissOnboarding,\n    isStepComplete,\n    isStepSkipped,\n    allStepsComplete,\n    markMultipleComplete,\n  } = useOnboardingState(storageKey);\n\n  // Refs to prevent race conditions - ALL refs must be declared before any conditional returns\n  const hasAutoMarkedRef = useRef(false);\n  const autoMarkingInProgressRef = useRef(false);\n  const lastCompletionStatusRef = useRef<string | null>(null);\n  // Ref to track in-flight action handlers - moved here to be before conditional return\n  const actionInProgressRef = useRef<Set<string>>(new Set());\n\n  // Sync completion status from hooks to localStorage\n  // Uses refs to prevent duplicate calls and race conditions\n  React.useEffect(() => {\n    // Skip if still loading\n    if (isLoadingCompletion) {\n      hasAutoMarkedRef.current = false; // Reset when loading starts\n      return;\n    }\n\n    // Skip if no completion status\n    if (!completionStatus) return;\n\n    // Create a stable key from completion status to detect actual changes\n    const statusKey = JSON.stringify(completionStatus);\n\n    // Skip if we've already processed this exact status\n    if (lastCompletionStatusRef.current === statusKey) return;\n\n    // Skip if auto-marking is currently in progress\n    if (autoMarkingInProgressRef.current) return;\n\n    // Find steps that need to be marked complete\n    // Read directly from state to avoid stale closure issues\n    const completedStepIds = Object.entries(completionStatus)\n      .filter(([stepId, isComplete]) => {\n        if (!isComplete) return false;\n        // Check against current state, not the callback\n        return !state.completedSteps.includes(stepId);\n      })\n      .map(([stepId]) => stepId);\n\n    if (completedStepIds.length > 0) {\n      // Mark as in progress to prevent concurrent calls\n      autoMarkingInProgressRef.current = true;\n\n      console.log('📊 Auto-marking steps as complete from hook data:', completedStepIds);\n      markMultipleComplete(completedStepIds);\n\n      // Update the last processed status key\n      lastCompletionStatusRef.current = statusKey;\n\n      // Reset the in-progress flag after a short delay\n      // This prevents rapid successive calls while allowing future updates\n      setTimeout(() => {\n        autoMarkingInProgressRef.current = false;\n      }, 100);\n    } else {\n      // Even if no steps to mark, update the status key to prevent re-processing\n      lastCompletionStatusRef.current = statusKey;\n    }\n  }, [completionStatus, isLoadingCompletion, state.completedSteps, markMultipleComplete]);\n\n  // useCallback must be called unconditionally (before any early returns)\n  const handleStepAction = useCallback(\n    async (step: OnboardingStepConfig) => {\n      // Prevent duplicate action handling for the same step\n      if (actionInProgressRef.current.has(step.id)) {\n        console.log(`⏳ Action already in progress for \"${step.id}\", skipping`);\n        return;\n      }\n\n      // Mark as in progress\n      actionInProgressRef.current.add(step.id);\n\n      try {\n        await step.onAction();\n\n        // Skip if already completed (could have been auto-marked while action was running)\n        if (state.completedSteps.includes(step.id)) {\n          console.log(`✓ Step \"${step.id}\" already completed, skipping mark`);\n          return;\n        }\n\n        // Auto-mark Knowledge Base as complete (no verification needed)\n        if (step.id === 'knowledge-base') {\n          console.log(`🎯 Auto-completing Knowledge Base`);\n          markComplete(step.id);\n          return;\n        }\n\n        // For other steps, re-check completion after action\n        if (step.checkComplete) {\n          try {\n            const isComplete = await step.checkComplete();\n            console.log(`🔍 Post-action check for \"${step.id}\": isComplete=${isComplete}`);\n\n            // Double-check it wasn't completed while we were checking\n            if (isComplete && !state.completedSteps.includes(step.id)) {\n              markComplete(step.id);\n            }\n          } catch (error) {\n            console.error(`Error checking completion for \"${step.id}\":`, error);\n          }\n        }\n      } finally {\n        // Remove from in-progress set\n        actionInProgressRef.current.delete(step.id);\n      }\n    },\n    [state.completedSteps, markComplete],\n  );\n\n  const handleStepSkip = (step: OnboardingStepConfig) => {\n    step.onSkip?.();\n    markSkipped(step.id);\n  };\n\n  const handleDismiss = () => {\n    dismissOnboarding();\n    onDismiss?.();\n  };\n\n  // ALL hooks have been called above - now safe to do conditional returns\n  // Don't render if dismissed\n  if (state.dismissed) {\n    return null;\n  }\n\n  const isAllComplete = allStepsComplete(steps);\n\n  return (\n    <div className={cn('w-full space-y-4', className)}>\n      {/* Header - responsive: stacks on mobile */}\n      <div className=\"flex flex-col items-start justify-between gap-3 md:flex-row md:items-center md:gap-0\">\n        <h2 className={SECTION_HEADING_CLASS}>Get Started</h2>\n\n        {isLoadingCompletion ? (\n          <div className=\"h-[48px] w-full animate-pulse rounded-[6px] bg-ods-border md:w-[160px]\" />\n        ) : isAllComplete ? (\n          <Button variant=\"accent\" onClick={handleDismiss} className=\"w-full md:w-auto\">\n            Close Onboarding\n          </Button>\n        ) : (\n          <Button variant=\"outline\" onClick={handleDismiss} className=\"w-full md:w-auto\">\n            Skip Onboarding\n          </Button>\n        )}\n      </div>\n\n      {/* Step cards - no wrapper, direct rendering */}\n      <div className={cn(spacing)}>\n        {steps.map(step => (\n          <OnboardingStepCard\n            key={step.id}\n            step={step}\n            isCompleted={isStepComplete(step.id)}\n            isSkipped={isStepSkipped(step.id)}\n            isCheckingCompletion={isLoadingCompletion}\n            onAction={() => handleStepAction(step)}\n            onSkip={() => handleStepSkip(step)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":["jsx","jsxs","cn","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","React","jsx","jsxs","React"]}
+{"version":3,"sources":["../src/components/platform/SoftwareInfo.tsx","../src/components/platform/SoftwareSourceBadge.tsx","../src/components/platform/CveLink.tsx","../src/components/platform/ToolBadge.tsx","../src/components/platform/ShellTypeBadge.tsx","../src/components/platform/ScriptInfoSection.tsx","../src/components/platform/ScriptArguments.tsx","../src/components/shared/onboarding/onboarding-step-card.tsx","../src/components/shared/onboarding/onboarding-walkthrough.tsx"],"sourcesContent":["/**\n * SoftwareInfo Component\n *\n * Displays software name with optional vendor information below it.\n * Part of the ODS (OpenFrame Design System) platform components.\n *\n * @example\n * ```tsx\n * <SoftwareInfo name=\"Visual Studio Code\" vendor=\"Microsoft\" />\n * <SoftwareInfo name=\"Chrome\" /> // Without vendor\n * ```\n */\n\nimport type React from 'react';\nimport { cn } from '../../utils/cn';\n\nexport interface SoftwareInfoProps {\n  /** Software name (required) */\n  name: string;\n  /** Software vendor (optional) */\n  vendor?: string;\n  /** Software version (optional) */\n  version?: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport const SoftwareInfo: React.FC<SoftwareInfoProps> = ({ name, vendor, version, className }) => {\n  return (\n    <div className={cn('flex flex-col gap-1', className)}>\n      <div className=\"flex items-center gap-2\">\n        <div className=\"text-ods-text-primary text-h4\">{name}</div>\n        {version && (\n          <div className=\"rounded bg-ods-bg-surface px-2 py-1 text-ods-text-secondary text-h6\">{version}</div>\n        )}\n      </div>\n      {vendor && <div className=\"text-ods-text-secondary text-h6\">{vendor}</div>}\n    </div>\n  );\n};\n\nSoftwareInfo.displayName = 'SoftwareInfo';\n","/**\n * SoftwareSourceBadge Component\n *\n * Displays a badge for software source types from Fleet MDM.\n * Supports all osquery software source types with appropriate styling.\n *\n * Fleet MDM Software Sources:\n * - apps: macOS Applications\n * - chrome_extensions: Chrome Browser Extensions\n * - firefox_addons: Firefox Browser Extensions\n * - safari_extensions: Safari Browser Extensions\n * - ie_extensions: Internet Explorer Extensions\n * - vscode_extensions: VS Code Extensions\n * - atom_packages: Atom Packages\n * - homebrew_packages: Homebrew Packages (macOS)\n * - npm_packages: NPM Packages\n * - python_packages: Python Packages\n * - apt_sources: APT Packages (Debian/Ubuntu)\n * - deb_packages: DEB Packages\n * - rpm_packages: RPM Packages (Red Hat/CentOS)\n * - yum_sources: YUM Packages\n * - portage_packages: Portage Packages (Gentoo)\n * - chocolatey_packages: Chocolatey Packages (Windows)\n * - programs: Windows Programs\n * - pkg_packages: PKG Packages\n *\n * @example\n * ```tsx\n * <SoftwareSourceBadge source=\"apps\" />\n * <SoftwareSourceBadge source=\"chrome_extensions\" />\n * <SoftwareSourceBadge source=\"python_packages\" />\n * ```\n */\n\nimport type React from 'react';\nimport { cn } from '../../utils/common';\nimport { PackageIcon, WindowsIcon, MacOSIcon, LinuxIcon } from '../icons';\n\nexport type SoftwareSource =\n  | 'apps'\n  | 'chrome_extensions'\n  | 'firefox_addons'\n  | 'safari_extensions'\n  | 'ie_extensions'\n  | 'vscode_extensions'\n  | 'atom_packages'\n  | 'homebrew_packages'\n  | 'npm_packages'\n  | 'python_packages'\n  | 'apt_sources'\n  | 'deb_packages'\n  | 'rpm_packages'\n  | 'yum_sources'\n  | 'portage_packages'\n  | 'chocolatey_packages'\n  | 'programs'\n  | 'pkg_packages';\n\nexport interface SoftwareSourceBadgeProps {\n  /** Software source type from Fleet MDM */\n  source: SoftwareSource;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Maps source types to human-readable labels and icons\n */\nconst sourceConfig: Record<SoftwareSource, { label: string; icon: React.ReactNode }> = {\n  apps: { label: 'App', icon: <MacOSIcon className=\"h-4 w-4\" /> },\n  chrome_extensions: { label: 'Chrome', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  firefox_addons: { label: 'Firefox', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  safari_extensions: { label: 'Safari', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  ie_extensions: { label: 'IE', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  vscode_extensions: { label: 'VS Code', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  atom_packages: { label: 'Atom', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  homebrew_packages: { label: 'Homebrew', icon: <MacOSIcon className=\"h-4 w-4\" /> },\n  npm_packages: { label: 'NPM', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  python_packages: { label: 'Python', icon: <PackageIcon className=\"h-4 w-4\" /> },\n  apt_sources: { label: 'APT', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  deb_packages: { label: 'DEB', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  rpm_packages: { label: 'RPM', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  yum_sources: { label: 'YUM', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  portage_packages: { label: 'Portage', icon: <LinuxIcon className=\"h-4 w-4\" /> },\n  chocolatey_packages: { label: 'Chocolatey', icon: <WindowsIcon className=\"h-4 w-4\" /> },\n  programs: { label: 'Windows', icon: <WindowsIcon className=\"h-4 w-4\" /> },\n  pkg_packages: { label: 'PKG', icon: <PackageIcon className=\"h-4 w-4\" /> },\n};\n\nexport const SoftwareSourceBadge: React.FC<SoftwareSourceBadgeProps> = ({ source, className }) => {\n  const config = sourceConfig[source] || { label: source, icon: <PackageIcon className=\"h-4 w-4\" /> };\n\n  return (\n    <span className={cn('inline-flex items-center gap-2 text-ods-text-primary', className)}>\n      {config.icon}\n      {config.label}\n    </span>\n  );\n};\n\nSoftwareSourceBadge.displayName = 'SoftwareSourceBadge';\n","/**\n * CveLink Component\n *\n * Displays a CVE ID with an external link icon that links to the NIST NVD database.\n * Part of the ODS (OpenFrame Design System) platform components.\n *\n * @example\n * ```tsx\n * <CveLink cveId=\"CVE-2024-1234\" />\n * ```\n */\n\nimport type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { CustomExternalLinkIcon } from '../icons';\n\nexport interface CveLinkProps {\n  /** CVE ID (e.g., \"CVE-2024-1234\") */\n  cveId: string;\n  /** Additional CSS classes */\n  className?: string;\n}\n\nexport const CveLink: React.FC<CveLinkProps> = ({ cveId, className }) => {\n  const nistUrl = `https://nvd.nist.gov/vuln/detail/${cveId}`;\n\n  return (\n    <a\n      href={nistUrl}\n      target=\"_blank\"\n      rel=\"noopener noreferrer\"\n      className={cn(\n        'group inline-flex items-center gap-2 text-ods-text-primary transition-colors text-code hover:text-ods-accent',\n        className,\n      )}\n    >\n      <span>{cveId}</span>\n      <CustomExternalLinkIcon className=\"h-4 w-4 text-ods-text-secondary transition-colors group-hover:text-ods-accent\" />\n    </a>\n  );\n};\n\nCveLink.displayName = 'CveLink';\n","/**\n * ToolBadge Component\n *\n * Displays a tool type badge with icon for OpenFrame integrated tools.\n * Used in tables to show tool sources like Fleet MDM, MeshCentral, etc.\n *\n * @example\n * ```tsx\n * <ToolBadge toolType=\"OPENFRAME_RMM\" />\n * <ToolBadge toolType=\"FLEET\" />\n * <ToolBadge toolType=\"MESHCENTRAL\" />\n * ```\n */\n\nimport type React from 'react';\nimport type { ToolType } from '../../types/tool.types';\nimport { cn } from '../../utils/cn';\nimport { getToolLabel } from '../../utils/tool-utils';\nimport { ToolIcon } from '../tool-icon';\n\nexport type { ToolType } from '../../types/tool.types';\n\nexport interface ToolBadgeProps {\n  /** Tool type */\n  toolType: ToolType;\n  /** Additional CSS classes */\n  className?: string;\n  iconClassName?: string;\n}\n\nexport const ToolBadge: React.FC<ToolBadgeProps> = ({ toolType, className, iconClassName }) => {\n  const label = getToolLabel(toolType);\n\n  return (\n    <div className={cn('flex items-center gap-1 text-ods-text-secondary', className)}>\n      <ToolIcon toolType={toolType} className={iconClassName} size={16} />\n      <span className=\"text-ods-text-primary text-h4\">{label}</span>\n    </div>\n  );\n};\n\nToolBadge.displayName = 'ToolBadge';\n","/**\n * ShellTypeBadge Component\n *\n * Displays a badge for shell/script types with appropriate icon and label.\n * Supports all RMM shell types.\n */\n\nimport type React from 'react';\nimport { type ShellType, ShellTypeValues } from '../../types/shell.types';\nimport { cn } from '../../utils/cn';\nimport { getShellLabel } from '../../utils/shell-utils';\nimport { BashIcon, CmdIcon, DenoIcon, NushellIcon, ShellIcon } from '../icons';\nimport { PowershellLogoGreyIcon } from '../icons-v2-generated/brand-logos/powershell-logo-grey-icon';\nimport { PythonLogoIcon } from '../icons-v2-generated/brand-logos/python-logo-icon';\n\n/**\n * Shell icon configuration with typed mapping\n */\ninterface ShellIconConfig {\n  icon: React.ComponentType<{ size?: number; color?: string; className?: string }>;\n  props: { size: number } & ({ className: string } | { color: string });\n}\n\n/**\n * Typed mapping of shell types to their icon configurations\n * Using Record<ShellType, ...> ensures all shell types are covered\n */\nconst shellIconMap: Record<ShellType, ShellIconConfig> = {\n  [ShellTypeValues.POWERSHELL]: {\n    icon: PowershellLogoGreyIcon,\n    props: { size: 16, className: 'text-ods-text-secondary' },\n  },\n  [ShellTypeValues.CMD]: {\n    icon: CmdIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.BASH]: {\n    icon: BashIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.PYTHON]: {\n    icon: PythonLogoIcon,\n    props: { size: 16, className: 'text-ods-text-secondary' },\n  },\n  [ShellTypeValues.NUSHELL]: {\n    icon: NushellIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.DENO]: {\n    icon: DenoIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n  [ShellTypeValues.SHELL]: {\n    icon: ShellIcon,\n    props: { size: 16, color: 'var(--color-text-secondary)' },\n  },\n} as const;\n\nconst defaultIconConfig: ShellIconConfig = {\n  icon: ShellIcon,\n  props: { size: 16, color: 'var(--color-text-secondary)' },\n};\n\nexport interface ShellTypeBadgeProps {\n  shellType: ShellType;\n  className?: string;\n  iconClassName?: string;\n}\n\nexport const ShellTypeBadge: React.FC<ShellTypeBadgeProps> = ({ shellType, className, iconClassName }) => {\n  const normalizedType = shellType?.toUpperCase() as ShellType;\n  const label = getShellLabel(normalizedType);\n  const { icon: IconComponent, props: iconProps } = shellIconMap[normalizedType] ?? defaultIconConfig;\n  const defaultIconClassName = 'className' in iconProps ? iconProps.className : undefined;\n\n  return (\n    <div className={cn('flex items-center gap-1', className)}>\n      <IconComponent size={16} className={cn(defaultIconClassName, iconClassName)} />\n      <span className=\"text-ods-text-primary text-h4\">{label}</span>\n    </div>\n  );\n};\n\nShellTypeBadge.displayName = 'ShellTypeBadge';\n","/**\n * ScriptInfoSection Component\n *\n * Displays script information in a card with header (title, description)\n * and detail cells (shell type, supported platforms, category, author).\n * Responsive layout: stacks cells on mobile, shows grid on desktop.\n */\n\nimport type React from 'react';\nimport Image from '../../embed-shims/next-image';\nimport { cn } from '../../utils/cn';\nimport { nameInitials } from '../../utils/format';\nimport { getOSLabel } from '../../utils/os-utils';\nimport { getShellLabel } from '../../utils/shell-utils';\n\n/**\n * Props for author avatar display\n */\nexport interface ScriptAuthor {\n  /** Author name */\n  name: string;\n  /** Author initials (used when no photo) */\n  initials?: string;\n  /** URL to author's photo */\n  photoUrl?: string;\n}\n\n/**\n * Props for ScriptInfoSection component\n */\nexport interface ScriptInfoSectionProps {\n  /** Script title/name */\n  headline: string;\n  /** Script description */\n  subheadline?: string;\n  /** Shell type (POWERSHELL, BASH, CMD, etc.) */\n  shellType?: string;\n  /** Array of supported platform strings (windows, darwin, linux, etc.) */\n  supportedPlatforms?: string[];\n  /** Script category */\n  category: string;\n  /** Author information */\n  author?: ScriptAuthor;\n  /** Additional CSS classes */\n  className?: string;\n}\n\n/**\n * Formats supported platforms array into a display string\n * @param platforms - Array of platform strings (e.g., ['windows', 'darwin', 'linux'])\n * @returns Formatted string (e.g., 'Windows, macOS, Linux')\n */\nfunction formatSupportedPlatforms(platforms?: string[]): string {\n  if (!platforms || platforms.length === 0) {\n    return 'All Platforms';\n  }\n  return platforms.map(platform => getOSLabel(platform)).join(', ');\n}\n\n/**\n * InfoCell - Single info cell with label and value\n */\ninterface InfoCellProps {\n  label: string;\n  value: string;\n  avatar?: ScriptAuthor;\n  className?: string;\n}\n\nfunction InfoCell({ label, value, avatar, className }: InfoCellProps) {\n  return (\n    <div className={cn('flex min-w-0 items-center gap-2', className)}>\n      {/* Avatar for author cell */}\n      {avatar && (\n        <div className=\"relative size-8 shrink-0 overflow-hidden rounded-full border border-ods-border bg-ods-bg\">\n          {avatar.photoUrl ? (\n            <Image src={avatar.photoUrl} alt={avatar.name} className=\"object-cover\" fill sizes=\"32px\" unoptimized />\n          ) : (\n            <div className=\"flex size-full items-center justify-center text-ods-text-secondary text-h6\">\n              {avatar.initials || nameInitials(avatar.name)}\n            </div>\n          )}\n        </div>\n      )}\n\n      {/* Text content */}\n      <div className=\"flex min-w-0 flex-col\">\n        <span className=\"truncate text-ods-text-primary text-h4\" title={value}>\n          {value}\n        </span>\n        <span className=\"truncate text-ods-text-secondary text-h6\">{label}</span>\n      </div>\n    </div>\n  );\n}\n\n/**\n * ScriptInfoSection - Displays script information in a structured card\n *\n * @example\n * ```tsx\n * <ScriptInfoSection\n *   title=\"System Backup Script\"\n *   description=\"Comprehensive Linux system backup script...\"\n *   shellType=\"BASH\"\n *   supportedPlatforms={['linux']}\n *   category=\"System Maintenance\"\n *   author={{ name: 'John Doe', photoUrl: '/avatars/john.jpg' }}\n * />\n * ```\n */\nexport const ScriptInfoSection: React.FC<ScriptInfoSectionProps> = ({\n  headline,\n  subheadline,\n  shellType,\n  supportedPlatforms,\n  category,\n  author,\n  className,\n}) => {\n  const shellLabel = getShellLabel(shellType);\n  const platformsLabel = formatSupportedPlatforms(supportedPlatforms);\n\n  return (\n    <div className={cn('overflow-hidden rounded-[6px] border border-ods-border bg-ods-card', className)}>\n      {/* Header row with title and description */}\n      <div className=\"border-b border-ods-border p-4\">\n        <div className=\"flex flex-col gap-1\">\n          <h3 className=\"text-ods-text-primary text-h4\">{headline}</h3>\n          {subheadline && <p className=\"break-words text-ods-text-secondary text-h6\">{subheadline}</p>}\n        </div>\n      </div>\n\n      {/* Details section with info cells\n          - Mobile/Tablet (<lg): 2x2 grid with divider between rows\n          - Desktop (lg+): 4 columns in single row\n      */}\n      {/* First row: Shell Type, Supported Platforms */}\n      <div className=\"grid grid-cols-2 gap-4 border-b border-ods-border px-4 py-4 lg:grid-cols-4 lg:border-b-0\">\n        <InfoCell label=\"Shell Type\" value={shellLabel} />\n        <InfoCell label=\"Supported Platforms\" value={platformsLabel} />\n        {/* Desktop only: Category and Author in same row */}\n        <InfoCell label=\"Category\" value={category} className=\"hidden lg:flex\" />\n        {author && <InfoCell label=\"Added by\" value={author.name} avatar={author} className=\"hidden lg:flex\" />}\n      </div>\n      {/* Second row (mobile/tablet only): Category, Author */}\n      <div className=\"grid grid-cols-2 gap-4 px-4 py-4 lg:hidden\">\n        <InfoCell label=\"Category\" value={category} />\n        {author && <InfoCell label=\"Added by\" value={author.name} avatar={author} />}\n      </div>\n    </div>\n  );\n};\n\nScriptInfoSection.displayName = 'ScriptInfoSection';\n","/**\n * ScriptArguments Component\n *\n * Displays and manages script arguments as key-value pairs.\n * Each argument has a name (key) and value input field with delete button.\n * Includes an \"Add Script Argument\" button to add new entries.\n */\n\nimport { Trash2 } from 'lucide-react';\nimport type React from 'react';\nimport { cn } from '../../utils/cn';\nimport { LockIcon, PlusCircleIcon } from '../icons-v2-generated';\nimport { Button } from '../ui/button';\nimport { Input } from '../ui/input';\nimport { Label } from '../ui/label';\n\n/**\n * What an untouched stored secret shows in its value field.\n *\n * Rendered as the field's PLACEHOLDER, never as its value: a mask held in\n * `value` is indistinguishable from something the user typed, and would be\n * submitted back as the secret itself.\n */\nconst SECRET_MASK = '**********';\n\nconst STORED_SECRET_KEY_HINT = \"A stored secret can't be renamed — delete it and add a new one\";\n\n/**\n * Single script argument with key and value\n */\nexport interface ScriptArgument {\n  /** Unique identifier for the argument */\n  id: string;\n  /** Argument name/key */\n  key: string;\n  /** Argument value (empty string for flag-type arguments) */\n  value: string;\n  /**\n   * A secret pair: the key carries a lock and the value is typed as a password.\n   * Meaningful for environment variables only.\n   */\n  secret?: boolean;\n  /**\n   * The server holds a value for this secret and does not send it back. While\n   * `value` is empty the field shows a mask, so empty means \"keep what is\n   * stored\" and typing replaces it.\n   *\n   * The stored value is bound to the key, which is therefore read-only:\n   * renaming would leave the old name holding the secret and the new one\n   * holding nothing.\n   */\n  hasStoredValue?: boolean;\n}\n\n/**\n * Props for ScriptArguments component\n */\nexport interface ScriptArgumentsProps {\n  /** Array of script arguments */\n  arguments: ScriptArgument[];\n  /** Callback when arguments change */\n  onArgumentsChange?: (args: ScriptArgument[]) => void;\n  /** Placeholder for key input */\n  keyPlaceholder?: string;\n  /** Placeholder for value input */\n  valuePlaceholder?: string;\n  /** Label for the add button */\n  addButtonLabel?: string;\n  /** Label for a second add button that appends a secret pair. Omit to not offer secrets. */\n  addSecretButtonLabel?: string;\n  /** Whether the component is disabled */\n  disabled?: boolean;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label for the title input */\n  titleLabel: string;\n}\n\n/**\n * ScriptArguments - Displays and manages script arguments\n *\n * @example\n * ```tsx\n * <ScriptArguments\n *   arguments={[\n *     { id: '1', key: 'port', value: '3000' },\n *     { id: '2', key: 'verbose', value: '' },\n *   ]}\n *   onArgumentsChange={(args) => setArguments(args)}\n * />\n * ```\n */\nexport const ScriptArguments: React.FC<ScriptArgumentsProps> = ({\n  arguments: args,\n  onArgumentsChange,\n  keyPlaceholder = 'Enter Key',\n  valuePlaceholder = 'Enter Value (empty=flag)',\n  addButtonLabel = 'Add Script Argument',\n  addSecretButtonLabel,\n  disabled = false,\n  className,\n  titleLabel,\n}) => {\n  const handleKeyChange = (id: string, newKey: string) => {\n    if (!onArgumentsChange) return;\n    const updated = args.map(arg => (arg.id === id ? { ...arg, key: newKey } : arg));\n    onArgumentsChange(updated);\n  };\n\n  const handleValueChange = (id: string, newValue: string) => {\n    if (!onArgumentsChange) return;\n    const updated = args.map(arg => (arg.id === id ? { ...arg, value: newValue } : arg));\n    onArgumentsChange(updated);\n  };\n\n  const handleDelete = (id: string) => {\n    if (!onArgumentsChange) return;\n    const updated = args.filter(arg => arg.id !== id);\n    onArgumentsChange(updated);\n  };\n\n  const handleAdd = (secret = false) => {\n    if (!onArgumentsChange) return;\n    const newArg: ScriptArgument = {\n      id: crypto.randomUUID(),\n      key: '',\n      value: '',\n      // Only set on a secret, so a plain pair keeps the shape it always had.\n      ...(secret && { secret: true }),\n    };\n    onArgumentsChange([...args, newArg]);\n  };\n\n  const isFirstRow = (index: number) => index === 0;\n\n  return (\n    <div className={cn('flex flex-col gap-2', className)}>\n      {args.map((arg, index) => {\n        const isStoredSecret = Boolean(arg.secret && arg.hasStoredValue);\n        // The mask stands for the stored value, so it goes once the user types a replacement.\n        const showsMask = isStoredSecret && !arg.value;\n\n        return (\n          <div key={arg.id} className=\"flex w-full items-end gap-2\">\n            {/* Key input - with label only on first row */}\n            <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n              {isFirstRow(index) && <Label spacing=\"tight\">{titleLabel}</Label>}\n              <Input\n                value={arg.key}\n                onChange={e => handleKeyChange(arg.id, e.target.value)}\n                placeholder={keyPlaceholder}\n                disabled={disabled}\n                readOnly={isStoredSecret}\n                title={isStoredSecret ? STORED_SECRET_KEY_HINT : undefined}\n                startAdornment={arg.secret ? <LockIcon role=\"img\" aria-label=\"Secret\" /> : undefined}\n              />\n            </div>\n\n            {/* Value input with delete button */}\n            <div className=\"flex min-w-0 flex-1 items-center gap-2\">\n              <div className=\"flex min-w-0 flex-1 flex-col gap-1\">\n                <Input\n                  // `new-password` keeps a password manager from filling a saved login into a secret.\n                  type={arg.secret ? 'password' : undefined}\n                  autoComplete={arg.secret ? 'new-password' : undefined}\n                  value={arg.value}\n                  onChange={e => handleValueChange(arg.id, e.target.value)}\n                  placeholder={showsMask ? SECRET_MASK : valuePlaceholder}\n                  disabled={disabled}\n                  className={cn(\n                    !arg.value && 'placeholder:text-ods-text-muted',\n                    // The mask reads as a value that is there, not as a prompt to fill one in.\n                    showsMask && '[&_input]:placeholder:text-ods-text-primary',\n                  )}\n                />\n              </div>\n              <Button\n                type=\"button\"\n                variant=\"outline\"\n                size=\"icon\"\n                onClick={() => handleDelete(arg.id)}\n                disabled={disabled}\n                aria-label=\"Delete argument\"\n                leftIcon={<Trash2 className=\"size-4 md:size-6\" color=\"var(--color-error)\" />}\n              />\n            </div>\n          </div>\n        );\n      })}\n\n      {/* Add buttons - aligned left */}\n      <div className=\"flex flex-wrap justify-start gap-[var(--spacing-system-xs)]\">\n        <Button\n          type=\"button\"\n          variant=\"outline\"\n          size=\"small\"\n          onClick={() => handleAdd()}\n          disabled={disabled}\n          className=\"self-start\"\n          leftIcon={<PlusCircleIcon className=\"text-ods-text-secondary\" />}\n        >\n          {addButtonLabel}\n        </Button>\n        {addSecretButtonLabel && (\n          <Button\n            type=\"button\"\n            variant=\"outline\"\n            size=\"small\"\n            onClick={() => handleAdd(true)}\n            disabled={disabled}\n            className=\"self-start\"\n            leftIcon={<LockIcon className=\"text-ods-text-secondary\" />}\n          >\n            {addSecretButtonLabel}\n          </Button>\n        )}\n      </div>\n    </div>\n  );\n};\n\nScriptArguments.displayName = 'ScriptArguments';\n","'use client';\n\nimport React from 'react';\nimport { cn } from '../../../utils/cn';\nimport { Button } from '../../ui/button';\nimport { InteractiveCard } from '../../ui/interactive-card';\nimport { StatusBadge } from '../../ui/status-badge';\n\nexport interface OnboardingStepCardProps {\n  step: {\n    id: string;\n    title: string;\n    description: string;\n    actionIcon: (color?: string) => React.ReactNode;\n    actionText: string;\n    completedText: string;\n    onAction: () => void | Promise<void>;\n    onSkip?: () => void;\n  };\n  isCompleted: boolean;\n  isSkipped: boolean;\n  isCheckingCompletion: boolean;\n  onAction: () => void | Promise<void>;\n  onSkip: () => void;\n  className?: string;\n}\n\nexport function OnboardingStepCard({\n  step,\n  isCompleted,\n  isSkipped,\n  isCheckingCompletion,\n  onAction,\n  onSkip,\n  className,\n}: OnboardingStepCardProps) {\n  const [isProcessing, setIsProcessing] = React.useState(false);\n\n  const handleAction = async (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setIsProcessing(true);\n    try {\n      await onAction();\n    } finally {\n      setIsProcessing(false);\n    }\n  };\n\n  const handleSkip = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    onSkip();\n  };\n\n  return (\n    <InteractiveCard\n      clickable={false}\n      className={cn(\n        'rounded-[6px] border border-ods-border bg-ods-card',\n        'flex flex-col md:flex-row',\n        'min-h-[80px] md:h-[80px]',\n        'items-start md:items-center',\n        'gap-3 md:gap-4',\n        'px-4 py-4 md:py-0',\n        className,\n      )}\n    >\n      {/* Left column - content */}\n      <div className=\"flex w-full min-w-0 flex-1 flex-col justify-center gap-1 md:w-auto\">\n        <h3 className=\"truncate text-ods-text-primary text-h4\" title={step.title}>\n          {step.title}\n        </h3>\n        <p className=\"h-[20px] truncate text-ods-text-secondary text-h6\" title={step.description}>\n          {step.description}\n        </p>\n      </div>\n\n      {/* Right column - action buttons, completed badge, or skipped badge */}\n      <div\n        className=\"flex w-full shrink-0 items-center justify-start gap-2 md:w-auto md:justify-end\"\n        onClick={e => e.stopPropagation()}\n      >\n        {isCheckingCompletion ? (\n          <>\n            <div className=\"h-[32px] w-[100px] animate-pulse rounded-[6px] bg-ods-border\" />\n            <div className=\"h-[32px] w-[120px] animate-pulse rounded-[6px] bg-ods-border\" />\n          </>\n        ) : isCompleted ? (\n          <>\n            <StatusBadge text=\"COMPLETED\" variant=\"card\" colorScheme=\"success\" />\n            <Button\n              variant=\"outline\"\n              onClick={handleAction}\n              disabled={isProcessing}\n              leftIcon={step.actionIcon('white')}\n            >\n              {step.completedText}\n            </Button>\n          </>\n        ) : isSkipped ? (\n          <>\n            <StatusBadge text=\"SKIPPED\" variant=\"card\" colorScheme=\"default\" />\n          </>\n        ) : (\n          <>\n            <Button variant=\"outline\" onClick={handleSkip}>\n              Skip Step\n            </Button>\n            <Button variant=\"accent\" onClick={handleAction} disabled={isProcessing} leftIcon={step.actionIcon('black')}>\n              {step.actionText}\n            </Button>\n          </>\n        )}\n      </div>\n    </InteractiveCard>\n  );\n}\n","'use client';\n\nimport React, { useRef, useCallback } from 'react';\nimport { useOnboardingState, type OnboardingStepConfig } from '../../../hooks/ui/use-onboarding-state';\nimport { cn } from '../../../utils/cn';\nimport { SECTION_HEADING_CLASS } from '../../layout/page-heading';\nimport { Button } from '../../ui/button';\nimport { OnboardingStepCard } from './onboarding-step-card';\n\nexport interface OnboardingWalkthroughProps {\n  steps: OnboardingStepConfig[];\n  /** Heading above the steps. Defaults to \"Get Started\". */\n  title?: string;\n  /**\n   * What to render once the walkthrough is dismissed. Receives `restart`,\n   * which clears every completed/skipped step and shows the walkthrough\n   * again. Omitted: a dismissed walkthrough renders nothing.\n   */\n  renderDismissed?: (restart: () => void) => React.ReactNode;\n  onDismiss?: () => void;\n  storageKey?: string;\n  className?: string;\n  spacing?: string;\n  /**\n   * Completion status from hook-based checks (e.g., useOnboardingCompletion)\n   * Object mapping step IDs to boolean completion status\n   */\n  completionStatus?: Record<string, boolean>;\n  /**\n   * Whether completion checks are still loading\n   */\n  isLoadingCompletion?: boolean;\n}\n\nexport function OnboardingWalkthrough({\n  steps,\n  title = 'Get Started',\n  renderDismissed,\n  onDismiss,\n  storageKey = 'openframe-onboarding-state',\n  className,\n  spacing = 'space-y-4',\n  completionStatus,\n  isLoadingCompletion = false,\n}: OnboardingWalkthroughProps) {\n  const {\n    state,\n    markComplete,\n    markSkipped,\n    dismissOnboarding,\n    resetOnboarding,\n    isStepComplete,\n    isStepSkipped,\n    allStepsComplete,\n    markMultipleComplete,\n  } = useOnboardingState(storageKey);\n\n  // Refs to prevent race conditions - ALL refs must be declared before any conditional returns\n  const hasAutoMarkedRef = useRef(false);\n  const autoMarkingInProgressRef = useRef(false);\n  const lastCompletionStatusRef = useRef<string | null>(null);\n  // Ref to track in-flight action handlers - moved here to be before conditional return\n  const actionInProgressRef = useRef<Set<string>>(new Set());\n\n  // Sync completion status from hooks to localStorage\n  // Uses refs to prevent duplicate calls and race conditions\n  React.useEffect(() => {\n    // Skip if still loading\n    if (isLoadingCompletion) {\n      hasAutoMarkedRef.current = false; // Reset when loading starts\n      return;\n    }\n\n    // Skip if no completion status\n    if (!completionStatus) return;\n\n    // Create a stable key from completion status to detect actual changes.\n    // An empty state (first load, or after a restart) is keyed by when it was\n    // written, so a restart applies the same status again.\n    const isFreshState = state.completedSteps.length === 0 && state.skippedSteps.length === 0;\n    const statusKey = `${JSON.stringify(completionStatus)}|${isFreshState ? state.lastUpdated : ''}`;\n\n    // Skip if we've already processed this exact status\n    if (lastCompletionStatusRef.current === statusKey) return;\n\n    // Skip if auto-marking is currently in progress\n    if (autoMarkingInProgressRef.current) return;\n\n    // Find steps that need to be marked complete\n    // Read directly from state to avoid stale closure issues\n    const completedStepIds = Object.entries(completionStatus)\n      .filter(([stepId, isComplete]) => {\n        if (!isComplete) return false;\n        // Check against current state, not the callback\n        return !state.completedSteps.includes(stepId);\n      })\n      .map(([stepId]) => stepId);\n\n    if (completedStepIds.length > 0) {\n      // Mark as in progress to prevent concurrent calls\n      autoMarkingInProgressRef.current = true;\n\n      markMultipleComplete(completedStepIds);\n\n      // Update the last processed status key\n      lastCompletionStatusRef.current = statusKey;\n\n      // Reset the in-progress flag after a short delay\n      // This prevents rapid successive calls while allowing future updates\n      setTimeout(() => {\n        autoMarkingInProgressRef.current = false;\n      }, 100);\n    } else {\n      // Even if no steps to mark, update the status key to prevent re-processing\n      lastCompletionStatusRef.current = statusKey;\n    }\n  }, [\n    completionStatus,\n    isLoadingCompletion,\n    state.completedSteps,\n    state.skippedSteps,\n    state.lastUpdated,\n    markMultipleComplete,\n  ]);\n\n  // useCallback must be called unconditionally (before any early returns)\n  const handleStepAction = useCallback(\n    async (step: OnboardingStepConfig) => {\n      // Prevent duplicate action handling for the same step\n      if (actionInProgressRef.current.has(step.id)) {\n        return;\n      }\n\n      // Mark as in progress\n      actionInProgressRef.current.add(step.id);\n\n      try {\n        await step.onAction();\n\n        // Skip if already completed (could have been auto-marked while action was running)\n        if (state.completedSteps.includes(step.id)) {\n          return;\n        }\n\n        // Auto-mark Knowledge Base as complete (no verification needed)\n        if (step.id === 'knowledge-base') {\n          markComplete(step.id);\n          return;\n        }\n\n        // For other steps, re-check completion after action\n        if (step.checkComplete) {\n          try {\n            const isComplete = await step.checkComplete();\n\n            // Double-check it wasn't completed while we were checking\n            if (isComplete && !state.completedSteps.includes(step.id)) {\n              markComplete(step.id);\n            }\n          } catch (error) {\n            console.error(`Error checking completion for \"${step.id}\":`, error);\n          }\n        }\n      } finally {\n        // Remove from in-progress set\n        actionInProgressRef.current.delete(step.id);\n      }\n    },\n    [state.completedSteps, markComplete],\n  );\n\n  const handleStepSkip = (step: OnboardingStepConfig) => {\n    step.onSkip?.();\n    markSkipped(step.id);\n  };\n\n  const handleDismiss = () => {\n    dismissOnboarding();\n    onDismiss?.();\n  };\n\n  // ALL hooks have been called above - now safe to do conditional returns\n  // Don't render if dismissed\n  if (state.dismissed) {\n    return renderDismissed ? <>{renderDismissed(resetOnboarding)}</> : null;\n  }\n\n  const isAllComplete = allStepsComplete(steps);\n\n  return (\n    <div className={cn('w-full space-y-4', className)}>\n      {/* Header - responsive: stacks on mobile */}\n      <div className=\"flex flex-col items-start justify-between gap-3 md:flex-row md:items-center md:gap-0\">\n        <h2 className={SECTION_HEADING_CLASS}>{title}</h2>\n\n        {isLoadingCompletion ? (\n          <div className=\"h-[48px] w-full animate-pulse rounded-[6px] bg-ods-border md:w-[160px]\" />\n        ) : isAllComplete ? (\n          <Button variant=\"accent\" onClick={handleDismiss} className=\"w-full md:w-auto\">\n            Close Onboarding\n          </Button>\n        ) : (\n          <Button variant=\"outline\" onClick={handleDismiss} className=\"w-full md:w-auto\">\n            Skip Onboarding\n          </Button>\n        )}\n      </div>\n\n      {/* Step cards - no wrapper, direct rendering */}\n      <div className={cn(spacing)}>\n        {steps.map(step => (\n          <OnboardingStepCard\n            key={step.id}\n            step={step}\n            isCompleted={isStepComplete(step.id)}\n            isSkipped={isStepSkipped(step.id)}\n            isCheckingCompletion={isLoadingCompletion}\n            onAction={() => handleStepAction(step)}\n            onSkip={() => handleStepSkip(step)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BM,SACE,KADF;AAHC,IAAM,eAA4C,CAAC,EAAE,MAAM,QAAQ,SAAS,UAAU,MAAM;AACjG,SACE,qBAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GACjD;AAAA,yBAAC,SAAI,WAAU,2BACb;AAAA,0BAAC,SAAI,WAAU,iCAAiC,gBAAK;AAAA,MACpD,WACC,oBAAC,SAAI,WAAU,uEAAuE,mBAAQ;AAAA,OAElG;AAAA,IACC,UAAU,oBAAC,SAAI,WAAU,mCAAmC,kBAAO;AAAA,KACtE;AAEJ;AAEA,aAAa,cAAc;;;AC4BG,gBAAAA,MAwB1B,QAAAC,aAxB0B;AAD9B,IAAM,eAAiF;AAAA,EACrF,MAAM,EAAE,OAAO,OAAO,MAAM,gBAAAD,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EAC9D,mBAAmB,EAAE,OAAO,UAAU,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EAChF,gBAAgB,EAAE,OAAO,WAAW,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EAC9E,mBAAmB,EAAE,OAAO,UAAU,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EAChF,eAAe,EAAE,OAAO,MAAM,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EACxE,mBAAmB,EAAE,OAAO,WAAW,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EACjF,eAAe,EAAE,OAAO,QAAQ,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EAC1E,mBAAmB,EAAE,OAAO,YAAY,MAAM,gBAAAA,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EAChF,cAAc,EAAE,OAAO,OAAO,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EACxE,iBAAiB,EAAE,OAAO,UAAU,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EAC9E,aAAa,EAAE,OAAO,OAAO,MAAM,gBAAAA,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EACrE,cAAc,EAAE,OAAO,OAAO,MAAM,gBAAAA,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EACtE,cAAc,EAAE,OAAO,OAAO,MAAM,gBAAAA,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EACtE,aAAa,EAAE,OAAO,OAAO,MAAM,gBAAAA,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EACrE,kBAAkB,EAAE,OAAO,WAAW,MAAM,gBAAAA,KAAC,aAAU,WAAU,WAAU,EAAG;AAAA,EAC9E,qBAAqB,EAAE,OAAO,cAAc,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EACtF,UAAU,EAAE,OAAO,WAAW,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAAA,EACxE,cAAc,EAAE,OAAO,OAAO,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAC1E;AAEO,IAAM,sBAA0D,CAAC,EAAE,QAAQ,UAAU,MAAM;AAChG,QAAM,SAAS,aAAa,MAAM,KAAK,EAAE,OAAO,QAAQ,MAAM,gBAAAA,KAAC,eAAY,WAAU,WAAU,EAAG;AAElG,SACE,gBAAAC,MAAC,UAAK,WAAWC,IAAG,wDAAwD,SAAS,GAClF;AAAA,WAAO;AAAA,IACP,OAAO;AAAA,KACV;AAEJ;AAEA,oBAAoB,cAAc;;;ACzE9B,SASE,OAAAC,MATF,QAAAC,aAAA;AAJG,IAAM,UAAkC,CAAC,EAAE,OAAO,UAAU,MAAM;AACvE,QAAM,UAAU,oCAAoC,KAAK;AAEzD,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAM;AAAA,MACN,QAAO;AAAA,MACP,KAAI;AAAA,MACJ,WAAW;AAAA,QACT;AAAA,QACA;AAAA,MACF;AAAA,MAEA;AAAA,wBAAAD,KAAC,UAAM,iBAAM;AAAA,QACb,gBAAAA,KAAC,0BAAuB,WAAU,iFAAgF;AAAA;AAAA;AAAA,EACpH;AAEJ;AAEA,QAAQ,cAAc;;;ACRlB,SACE,OAAAE,MADF,QAAAC,aAAA;AAJG,IAAM,YAAsC,CAAC,EAAE,UAAU,WAAW,cAAc,MAAM;AAC7F,QAAM,QAAQ,aAAa,QAAQ;AAEnC,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,mDAAmD,SAAS,GAC7E;AAAA,oBAAAD,KAAC,YAAS,UAAoB,WAAW,eAAe,MAAM,IAAI;AAAA,IAClE,gBAAAA,KAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,KACzD;AAEJ;AAEA,UAAU,cAAc;;;ACmCpB,SACE,OAAAE,MADF,QAAAC,aAAA;AAjDJ,IAAM,eAAmD;AAAA,EACvD,CAAC,gBAAgB,UAAU,GAAG;AAAA,IAC5B,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,WAAW,0BAA0B;AAAA,EAC1D;AAAA,EACA,CAAC,gBAAgB,GAAG,GAAG;AAAA,IACrB,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,OAAO,8BAA8B;AAAA,EAC1D;AAAA,EACA,CAAC,gBAAgB,IAAI,GAAG;AAAA,IACtB,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,OAAO,8BAA8B;AAAA,EAC1D;AAAA,EACA,CAAC,gBAAgB,MAAM,GAAG;AAAA,IACxB,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,WAAW,0BAA0B;AAAA,EAC1D;AAAA,EACA,CAAC,gBAAgB,OAAO,GAAG;AAAA,IACzB,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,OAAO,8BAA8B;AAAA,EAC1D;AAAA,EACA,CAAC,gBAAgB,IAAI,GAAG;AAAA,IACtB,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,OAAO,8BAA8B;AAAA,EAC1D;AAAA,EACA,CAAC,gBAAgB,KAAK,GAAG;AAAA,IACvB,MAAM;AAAA,IACN,OAAO,EAAE,MAAM,IAAI,OAAO,8BAA8B;AAAA,EAC1D;AACF;AAEA,IAAM,oBAAqC;AAAA,EACzC,MAAM;AAAA,EACN,OAAO,EAAE,MAAM,IAAI,OAAO,8BAA8B;AAC1D;AAQO,IAAM,iBAAgD,CAAC,EAAE,WAAW,WAAW,cAAc,MAAM;AACxG,QAAM,iBAAiB,WAAW,YAAY;AAC9C,QAAM,QAAQ,cAAc,cAAc;AAC1C,QAAM,EAAE,MAAM,eAAe,OAAO,UAAU,IAAI,aAAa,cAAc,KAAK;AAClF,QAAM,uBAAuB,eAAe,YAAY,UAAU,YAAY;AAE9E,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,2BAA2B,SAAS,GACrD;AAAA,oBAAAD,KAAC,iBAAc,MAAM,IAAI,WAAW,GAAG,sBAAsB,aAAa,GAAG;AAAA,IAC7E,gBAAAA,KAAC,UAAK,WAAU,iCAAiC,iBAAM;AAAA,KACzD;AAEJ;AAEA,eAAe,cAAc;;;ACPjB,gBAAAE,MAUN,QAAAC,aAVM;AAxBZ,SAAS,yBAAyB,WAA8B;AAC9D,MAAI,CAAC,aAAa,UAAU,WAAW,GAAG;AACxC,WAAO;AAAA,EACT;AACA,SAAO,UAAU,IAAI,cAAY,WAAW,QAAQ,CAAC,EAAE,KAAK,IAAI;AAClE;AAYA,SAAS,SAAS,EAAE,OAAO,OAAO,QAAQ,UAAU,GAAkB;AACpE,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,mCAAmC,SAAS,GAE5D;AAAA,cACC,gBAAAD,KAAC,SAAI,WAAU,4FACZ,iBAAO,WACN,gBAAAA,KAAC,sBAAM,KAAK,OAAO,UAAU,KAAK,OAAO,MAAM,WAAU,gBAAe,MAAI,MAAC,OAAM,QAAO,aAAW,MAAC,IAEtG,gBAAAA,KAAC,SAAI,WAAU,8EACZ,iBAAO,YAAY,aAAa,OAAO,IAAI,GAC9C,GAEJ;AAAA,IAIF,gBAAAC,MAAC,SAAI,WAAU,yBACb;AAAA,sBAAAD,KAAC,UAAK,WAAU,0CAAyC,OAAO,OAC7D,iBACH;AAAA,MACA,gBAAAA,KAAC,UAAK,WAAU,4CAA4C,iBAAM;AAAA,OACpE;AAAA,KACF;AAEJ;AAiBO,IAAM,oBAAsD,CAAC;AAAA,EAClE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,aAAa,cAAc,SAAS;AAC1C,QAAM,iBAAiB,yBAAyB,kBAAkB;AAElE,SACE,gBAAAC,MAAC,SAAI,WAAW,GAAG,sEAAsE,SAAS,GAEhG;AAAA,oBAAAD,KAAC,SAAI,WAAU,kCACb,0BAAAC,MAAC,SAAI,WAAU,uBACb;AAAA,sBAAAD,KAAC,QAAG,WAAU,iCAAiC,oBAAS;AAAA,MACvD,eAAe,gBAAAA,KAAC,OAAE,WAAU,+CAA+C,uBAAY;AAAA,OAC1F,GACF;AAAA,IAOA,gBAAAC,MAAC,SAAI,WAAU,4FACb;AAAA,sBAAAD,KAAC,YAAS,OAAM,cAAa,OAAO,YAAY;AAAA,MAChD,gBAAAA,KAAC,YAAS,OAAM,uBAAsB,OAAO,gBAAgB;AAAA,MAE7D,gBAAAA,KAAC,YAAS,OAAM,YAAW,OAAO,UAAU,WAAU,kBAAiB;AAAA,MACtE,UAAU,gBAAAA,KAAC,YAAS,OAAM,YAAW,OAAO,OAAO,MAAM,QAAQ,QAAQ,WAAU,kBAAiB;AAAA,OACvG;AAAA,IAEA,gBAAAC,MAAC,SAAI,WAAU,8CACb;AAAA,sBAAAD,KAAC,YAAS,OAAM,YAAW,OAAO,UAAU;AAAA,MAC3C,UAAU,gBAAAA,KAAC,YAAS,OAAM,YAAW,OAAO,OAAO,MAAM,QAAQ,QAAQ;AAAA,OAC5E;AAAA,KACF;AAEJ;AAEA,kBAAkB,cAAc;;;AClJhC,SAAS,cAAc;AAyIX,SACwB,OAAAE,MADxB,QAAAC,aAAA;AA1HZ,IAAM,cAAc;AAEpB,IAAM,yBAAyB;AAmExB,IAAM,kBAAkD,CAAC;AAAA,EAC9D,WAAW;AAAA,EACX;AAAA,EACA,iBAAiB;AAAA,EACjB,mBAAmB;AAAA,EACnB,iBAAiB;AAAA,EACjB;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AACF,MAAM;AACJ,QAAM,kBAAkB,CAAC,IAAY,WAAmB;AACtD,QAAI,CAAC,kBAAmB;AACxB,UAAM,UAAU,KAAK,IAAI,SAAQ,IAAI,OAAO,KAAK,EAAE,GAAG,KAAK,KAAK,OAAO,IAAI,GAAI;AAC/E,sBAAkB,OAAO;AAAA,EAC3B;AAEA,QAAM,oBAAoB,CAAC,IAAY,aAAqB;AAC1D,QAAI,CAAC,kBAAmB;AACxB,UAAM,UAAU,KAAK,IAAI,SAAQ,IAAI,OAAO,KAAK,EAAE,GAAG,KAAK,OAAO,SAAS,IAAI,GAAI;AACnF,sBAAkB,OAAO;AAAA,EAC3B;AAEA,QAAM,eAAe,CAAC,OAAe;AACnC,QAAI,CAAC,kBAAmB;AACxB,UAAM,UAAU,KAAK,OAAO,SAAO,IAAI,OAAO,EAAE;AAChD,sBAAkB,OAAO;AAAA,EAC3B;AAEA,QAAM,YAAY,CAAC,SAAS,UAAU;AACpC,QAAI,CAAC,kBAAmB;AACxB,UAAM,SAAyB;AAAA,MAC7B,IAAI,OAAO,WAAW;AAAA,MACtB,KAAK;AAAA,MACL,OAAO;AAAA;AAAA,MAEP,GAAI,UAAU,EAAE,QAAQ,KAAK;AAAA,IAC/B;AACA,sBAAkB,CAAC,GAAG,MAAM,MAAM,CAAC;AAAA,EACrC;AAEA,QAAM,aAAa,CAAC,UAAkB,UAAU;AAEhD,SACE,gBAAAA,MAAC,SAAI,WAAW,GAAG,uBAAuB,SAAS,GAChD;AAAA,SAAK,IAAI,CAAC,KAAK,UAAU;AACxB,YAAM,iBAAiB,QAAQ,IAAI,UAAU,IAAI,cAAc;AAE/D,YAAM,YAAY,kBAAkB,CAAC,IAAI;AAEzC,aACE,gBAAAA,MAAC,SAAiB,WAAU,+BAE1B;AAAA,wBAAAA,MAAC,SAAI,WAAU,sCACZ;AAAA,qBAAW,KAAK,KAAK,gBAAAD,KAAC,SAAM,SAAQ,SAAS,sBAAW;AAAA,UACzD,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO,IAAI;AAAA,cACX,UAAU,OAAK,gBAAgB,IAAI,IAAI,EAAE,OAAO,KAAK;AAAA,cACrD,aAAa;AAAA,cACb;AAAA,cACA,UAAU;AAAA,cACV,OAAO,iBAAiB,yBAAyB;AAAA,cACjD,gBAAgB,IAAI,SAAS,gBAAAA,KAAC,YAAS,MAAK,OAAM,cAAW,UAAS,IAAK;AAAA;AAAA,UAC7E;AAAA,WACF;AAAA,QAGA,gBAAAC,MAAC,SAAI,WAAU,0CACb;AAAA,0BAAAD,KAAC,SAAI,WAAU,sCACb,0BAAAA;AAAA,YAAC;AAAA;AAAA,cAEC,MAAM,IAAI,SAAS,aAAa;AAAA,cAChC,cAAc,IAAI,SAAS,iBAAiB;AAAA,cAC5C,OAAO,IAAI;AAAA,cACX,UAAU,OAAK,kBAAkB,IAAI,IAAI,EAAE,OAAO,KAAK;AAAA,cACvD,aAAa,YAAY,cAAc;AAAA,cACvC;AAAA,cACA,WAAW;AAAA,gBACT,CAAC,IAAI,SAAS;AAAA;AAAA,gBAEd,aAAa;AAAA,cACf;AAAA;AAAA,UACF,GACF;AAAA,UACA,gBAAAA;AAAA,YAAC;AAAA;AAAA,cACC,MAAK;AAAA,cACL,SAAQ;AAAA,cACR,MAAK;AAAA,cACL,SAAS,MAAM,aAAa,IAAI,EAAE;AAAA,cAClC;AAAA,cACA,cAAW;AAAA,cACX,UAAU,gBAAAA,KAAC,UAAO,WAAU,oBAAmB,OAAM,sBAAqB;AAAA;AAAA,UAC5E;AAAA,WACF;AAAA,WA1CQ,IAAI,EA2Cd;AAAA,IAEJ,CAAC;AAAA,IAGD,gBAAAC,MAAC,SAAI,WAAU,+DACb;AAAA,sBAAAD;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,UAAU;AAAA,UACzB;AAAA,UACA,WAAU;AAAA,UACV,UAAU,gBAAAA,KAAC,kBAAe,WAAU,2BAA0B;AAAA,UAE7D;AAAA;AAAA,MACH;AAAA,MACC,wBACC,gBAAAA;AAAA,QAAC;AAAA;AAAA,UACC,MAAK;AAAA,UACL,SAAQ;AAAA,UACR,MAAK;AAAA,UACL,SAAS,MAAM,UAAU,IAAI;AAAA,UAC7B;AAAA,UACA,WAAU;AAAA,UACV,UAAU,gBAAAA,KAAC,YAAS,WAAU,2BAA0B;AAAA,UAEvD;AAAA;AAAA,MACH;AAAA,OAEJ;AAAA,KACF;AAEJ;AAEA,gBAAgB,cAAc;;;AC3N9B,OAAO,WAAW;AAiEZ,SAeI,UAdF,OAAAE,MADF,QAAAC,aAAA;AAxCC,SAAS,mBAAmB;AAAA,EACjC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAA4B;AAC1B,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,KAAK;AAE5D,QAAM,eAAe,OAAO,MAAwB;AAClD,MAAE,gBAAgB;AAClB,oBAAgB,IAAI;AACpB,QAAI;AACF,YAAM,SAAS;AAAA,IACjB,UAAE;AACA,sBAAgB,KAAK;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,aAAa,CAAC,MAAwB;AAC1C,MAAE,gBAAgB;AAClB,WAAO;AAAA,EACT;AAEA,SACE,gBAAAA;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,WAAW;AAAA,QACT;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAGA;AAAA,wBAAAA,MAAC,SAAI,WAAU,sEACb;AAAA,0BAAAD,KAAC,QAAG,WAAU,0CAAyC,OAAO,KAAK,OAChE,eAAK,OACR;AAAA,UACA,gBAAAA,KAAC,OAAE,WAAU,qDAAoD,OAAO,KAAK,aAC1E,eAAK,aACR;AAAA,WACF;AAAA,QAGA,gBAAAA;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,OAAK,EAAE,gBAAgB;AAAA,YAE/B,iCACC,gBAAAC,MAAA,YACE;AAAA,8BAAAD,KAAC,SAAI,WAAU,gEAA+D;AAAA,cAC9E,gBAAAA,KAAC,SAAI,WAAU,gEAA+D;AAAA,eAChF,IACE,cACF,gBAAAC,MAAA,YACE;AAAA,8BAAAD,KAAC,eAAY,MAAK,aAAY,SAAQ,QAAO,aAAY,WAAU;AAAA,cACnE,gBAAAA;AAAA,gBAAC;AAAA;AAAA,kBACC,SAAQ;AAAA,kBACR,SAAS;AAAA,kBACT,UAAU;AAAA,kBACV,UAAU,KAAK,WAAW,OAAO;AAAA,kBAEhC,eAAK;AAAA;AAAA,cACR;AAAA,eACF,IACE,YACF,gBAAAA,KAAA,YACE,0BAAAA,KAAC,eAAY,MAAK,WAAU,SAAQ,QAAO,aAAY,WAAU,GACnE,IAEA,gBAAAC,MAAA,YACE;AAAA,8BAAAD,KAAC,UAAO,SAAQ,WAAU,SAAS,YAAY,uBAE/C;AAAA,cACA,gBAAAA,KAAC,UAAO,SAAQ,UAAS,SAAS,cAAc,UAAU,cAAc,UAAU,KAAK,WAAW,OAAO,GACtG,eAAK,YACR;AAAA,eACF;AAAA;AAAA,QAEJ;AAAA;AAAA;AAAA,EACF;AAEJ;;;ACjHA,OAAOE,UAAS,QAAQ,mBAAmB;AAsLd,qBAAAC,WAAA,OAAAC,MAQvB,QAAAC,aARuB;AAtJtB,SAAS,sBAAsB;AAAA,EACpC;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA,sBAAsB;AACxB,GAA+B;AAC7B,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,mBAAmB,UAAU;AAGjC,QAAM,mBAAmB,OAAO,KAAK;AACrC,QAAM,2BAA2B,OAAO,KAAK;AAC7C,QAAM,0BAA0B,OAAsB,IAAI;AAE1D,QAAM,sBAAsB,OAAoB,oBAAI,IAAI,CAAC;AAIzD,EAAAC,OAAM,UAAU,MAAM;AAEpB,QAAI,qBAAqB;AACvB,uBAAiB,UAAU;AAC3B;AAAA,IACF;AAGA,QAAI,CAAC,iBAAkB;AAKvB,UAAM,eAAe,MAAM,eAAe,WAAW,KAAK,MAAM,aAAa,WAAW;AACxF,UAAM,YAAY,GAAG,KAAK,UAAU,gBAAgB,CAAC,IAAI,eAAe,MAAM,cAAc,EAAE;AAG9F,QAAI,wBAAwB,YAAY,UAAW;AAGnD,QAAI,yBAAyB,QAAS;AAItC,UAAM,mBAAmB,OAAO,QAAQ,gBAAgB,EACrD,OAAO,CAAC,CAAC,QAAQ,UAAU,MAAM;AAChC,UAAI,CAAC,WAAY,QAAO;AAExB,aAAO,CAAC,MAAM,eAAe,SAAS,MAAM;AAAA,IAC9C,CAAC,EACA,IAAI,CAAC,CAAC,MAAM,MAAM,MAAM;AAE3B,QAAI,iBAAiB,SAAS,GAAG;AAE/B,+BAAyB,UAAU;AAEnC,2BAAqB,gBAAgB;AAGrC,8BAAwB,UAAU;AAIlC,iBAAW,MAAM;AACf,iCAAyB,UAAU;AAAA,MACrC,GAAG,GAAG;AAAA,IACR,OAAO;AAEL,8BAAwB,UAAU;AAAA,IACpC;AAAA,EACF,GAAG;AAAA,IACD;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN;AAAA,EACF,CAAC;AAGD,QAAM,mBAAmB;AAAA,IACvB,OAAO,SAA+B;AAEpC,UAAI,oBAAoB,QAAQ,IAAI,KAAK,EAAE,GAAG;AAC5C;AAAA,MACF;AAGA,0BAAoB,QAAQ,IAAI,KAAK,EAAE;AAEvC,UAAI;AACF,cAAM,KAAK,SAAS;AAGpB,YAAI,MAAM,eAAe,SAAS,KAAK,EAAE,GAAG;AAC1C;AAAA,QACF;AAGA,YAAI,KAAK,OAAO,kBAAkB;AAChC,uBAAa,KAAK,EAAE;AACpB;AAAA,QACF;AAGA,YAAI,KAAK,eAAe;AACtB,cAAI;AACF,kBAAM,aAAa,MAAM,KAAK,cAAc;AAG5C,gBAAI,cAAc,CAAC,MAAM,eAAe,SAAS,KAAK,EAAE,GAAG;AACzD,2BAAa,KAAK,EAAE;AAAA,YACtB;AAAA,UACF,SAAS,OAAO;AACd,oBAAQ,MAAM,kCAAkC,KAAK,EAAE,MAAM,KAAK;AAAA,UACpE;AAAA,QACF;AAAA,MACF,UAAE;AAEA,4BAAoB,QAAQ,OAAO,KAAK,EAAE;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,CAAC,MAAM,gBAAgB,YAAY;AAAA,EACrC;AAEA,QAAM,iBAAiB,CAAC,SAA+B;AACrD,SAAK,SAAS;AACd,gBAAY,KAAK,EAAE;AAAA,EACrB;AAEA,QAAM,gBAAgB,MAAM;AAC1B,sBAAkB;AAClB,gBAAY;AAAA,EACd;AAIA,MAAI,MAAM,WAAW;AACnB,WAAO,kBAAkB,gBAAAF,KAAAD,WAAA,EAAG,0BAAgB,eAAe,GAAE,IAAM;AAAA,EACrE;AAEA,QAAM,gBAAgB,iBAAiB,KAAK;AAE5C,SACE,gBAAAE,MAAC,SAAI,WAAW,GAAG,oBAAoB,SAAS,GAE9C;AAAA,oBAAAA,MAAC,SAAI,WAAU,wFACb;AAAA,sBAAAD,KAAC,QAAG,WAAW,uBAAwB,iBAAM;AAAA,MAE5C,sBACC,gBAAAA,KAAC,SAAI,WAAU,0EAAyE,IACtF,gBACF,gBAAAA,KAAC,UAAO,SAAQ,UAAS,SAAS,eAAe,WAAU,oBAAmB,8BAE9E,IAEA,gBAAAA,KAAC,UAAO,SAAQ,WAAU,SAAS,eAAe,WAAU,oBAAmB,6BAE/E;AAAA,OAEJ;AAAA,IAGA,gBAAAA,KAAC,SAAI,WAAW,GAAG,OAAO,GACvB,gBAAM,IAAI,UACT,gBAAAA;AAAA,MAAC;AAAA;AAAA,QAEC;AAAA,QACA,aAAa,eAAe,KAAK,EAAE;AAAA,QACnC,WAAW,cAAc,KAAK,EAAE;AAAA,QAChC,sBAAsB;AAAA,QACtB,UAAU,MAAM,iBAAiB,IAAI;AAAA,QACrC,QAAQ,MAAM,eAAe,IAAI;AAAA;AAAA,MAN5B,KAAK;AAAA,IAOZ,CACD,GACH;AAAA,KACF;AAEJ;","names":["jsx","jsxs","cn","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","jsx","jsxs","React","Fragment","jsx","jsxs","React"]}

package/dist/{chunk-EEL4RGHX.js → chunk-D5QSGV3I.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   PageLayout
-} from "./chunk-ZRN244JV.js";
+} from "./chunk-WTNFYZB6.js";
 import {
   formatBioText,
   formatDateWithTimezone,
@@ -137,4 +137,4 @@ export {
   DetailPageSkeleton,
   ArticleAuthorByline
 };
-//# sourceMappingURL=chunk-EEL4RGHX.js.map
+//# sourceMappingURL=chunk-D5QSGV3I.js.map

package/dist/{chunk-6LN7ZNHT.js → chunk-DIWJ6NBT.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   createSseSubscription
-} from "./chunk-ZRN244JV.js";
+} from "./chunk-WTNFYZB6.js";
 import {
   useChatIdentity
 } from "./chunk-FQDHQNSU.js";
@@ -275,4 +275,4 @@ export {
   TICKET_MARK_READ_DEBOUNCE_MS,
   TOAST_COPY
 };
-//# sourceMappingURL=chunk-6LN7ZNHT.js.map
+//# sourceMappingURL=chunk-DIWJ6NBT.js.map

package/dist/{chunk-IPZCEAAH.js → chunk-EWZPMPQP.js}

@@ -1,7 +1,7 @@
 "use client";
 import {
   DEFAULT_FOLDER_INDEX_FILE
-} from "./chunk-ZRN244JV.js";
+} from "./chunk-WTNFYZB6.js";
 import {
   scrollElementIntoView
 } from "./chunk-IGKXYFCP.js";
@@ -358,4 +358,4 @@ export {
   MultiLevelNavigation,
   MobileNavigationDropdown
 };
-//# sourceMappingURL=chunk-IPZCEAAH.js.map
+//# sourceMappingURL=chunk-EWZPMPQP.js.map

package/dist/{chunk-NQCID4VF.js → chunk-F5N2P2GD.js}

@@ -1,14 +1,14 @@
 "use client";
 import {
   ContactForm
-} from "./chunk-4ZKZSWX4.js";
+} from "./chunk-ULOUTQBX.js";
 import {
   DeliveryRow,
   DevCardRowContent,
   DevCardRowSkeletonList,
   DevSectionPage,
   ListEmptyState
-} from "./chunk-L4NLXAET.js";
+} from "./chunk-SPI7DCD3.js";
 import {
   EmptyState,
   UnifiedPagination
@@ -19,7 +19,7 @@ import {
   TOAST_COPY,
   isOptimistic,
   useOptionalTicketLive
-} from "./chunk-6LN7ZNHT.js";
+} from "./chunk-DIWJ6NBT.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -35,11 +35,11 @@ import {
   Textarea,
   TicketAttachmentsList,
   devSectionAnchorId
-} from "./chunk-ZRN244JV.js";
+} from "./chunk-WTNFYZB6.js";
 import {
   toast,
   useScrollToHash
-} from "./chunk-CTF5IQQZ.js";
+} from "./chunk-BGHQW5D5.js";
 import {
   PAGE_PARAM_LIMITS,
   pageCount,
@@ -1832,4 +1832,4 @@ export {
   HelpCenterCreateForm,
   HelpCenterList
 };
-//# sourceMappingURL=chunk-NQCID4VF.js.map
+//# sourceMappingURL=chunk-F5N2P2GD.js.map

package/dist/{chunk-CY3XHQM3.cjs → chunk-F7EZBJTL.cjs}

@@ -1,7 +1,7 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunk3LW6AJMJcjs = require('./chunk-3LW6AJMJ.cjs');
+var _chunkKSDOCJ7Bcjs = require('./chunk-KSDOCJ7B.cjs');
 
 
 var _chunkT7GIFC5Ycjs = require('./chunk-T7GIFC5Y.cjs');
@@ -160,7 +160,7 @@ function TicketLiveProvider({ children, enabled = true }) {
   _react2.default.useEffect(() => {
     if (!streamEnabled) return void 0;
     if (typeof window === "undefined") return void 0;
-    subscriptionRef.current = _chunk3LW6AJMJcjs.createSseSubscription.call(void 0, {
+    subscriptionRef.current = _chunkKSDOCJ7Bcjs.createSseSubscription.call(void 0, {
       url: streamUrl,
       onEvent: (name, data) => handlersRef.current.onEvent(name, data),
       onStatusChange: (status) => handlersRef.current.onStatus(status),
@@ -275,4 +275,4 @@ var TOAST_COPY = {
 
 
 exports.useOptionalTicketLive = useOptionalTicketLive; exports.useTicketLive = useTicketLive; exports.TicketLiveProvider = TicketLiveProvider; exports.isOptimistic = isOptimistic; exports.TICKET_TEXT_MAX_CHARS = TICKET_TEXT_MAX_CHARS; exports.TICKET_MARK_READ_DEBOUNCE_MS = TICKET_MARK_READ_DEBOUNCE_MS; exports.TOAST_COPY = TOAST_COPY;
-//# sourceMappingURL=chunk-CY3XHQM3.cjs.map
+//# sourceMappingURL=chunk-F7EZBJTL.cjs.map