@checkstack/ui 1.11.0 → 1.13.0

package/src/components/ActionCard.tsx

@@ -4,15 +4,31 @@ import {
   ChevronRight,
   GripVertical,
   AlertTriangle,
+  MoreVertical,
   Trash2,
 } from "lucide-react";
 import { Card, CardContent, CardHeader } from "./Card";
 import { Button } from "./Button";
 import { Toggle } from "./Toggle";
-import { DynamicIcon, type LucideIconName } from "./DynamicIcon";
+import { DynamicIcon, type IconName } from "./DynamicIcon";
 import { Badge, type BadgeProps } from "./Badge";
+import { Popover, PopoverContent, PopoverTrigger } from "./Popover";
+import { DropdownMenuItem, MenuCloseContext } from "./Menu";
 import { cn } from "../utils";
 
+/**
+ * A single entry in an {@link ActionCard}'s three-dot overflow menu. Used to
+ * relocate per-card commands (Duplicate, Disable/Enable, Delete) off the
+ * header row into a compact menu for a Home-Assistant-style collapsed card.
+ */
+export interface ActionCardMenuItem {
+  label: string;
+  icon?: IconName;
+  onClick: () => void;
+  /** `destructive` tints the item red (e.g. Delete). Defaults to neutral. */
+  variant?: "default" | "destructive";
+}
+
 export interface ActionCardProps {
   /** Stable identifier used for drag-reorder + React key. */
   id: string;
@@ -22,8 +38,8 @@ export interface ActionCardProps {
   description?: string;
   /** Plugin/category label rendered as a subdued badge. */
   category?: string;
-  /** Lucide icon (PascalCase) shown to the left of the title. */
-  icon?: LucideIconName;
+  /** Icon (PascalCase) shown to the left of the title - lucide or brand. */
+  icon?: IconName;
   /** Toggle for the action's `enabled` flag. Omit to hide the toggle. */
   enabled?: boolean;
   onEnabledChange?: (enabled: boolean) => void;
@@ -36,6 +52,26 @@ export interface ActionCardProps {
   /** Controlled expanded state. */
   expanded?: boolean;
   onExpandedChange?: (expanded: boolean) => void;
+  /**
+   * When provided, the card behaves as a Home-Assistant-style collapsed
+   * summary row: clicking the header opens the item's full configuration in
+   * a side sheet (via this callback) instead of expanding inline. The body
+   * `children` are not rendered inline in this mode - the host renders them
+   * inside its own sheet. Omit to keep the legacy inline-expand behaviour.
+   */
+  onOpenSheet?: () => void;
+  /**
+   * Compact, single-line summary shown under the title in the collapsed
+   * summary row (e.g. derived from the item's config). Distinct from
+   * `description`, which is the operator's free-text note; `summary` wins
+   * when both are present.
+   */
+  summary?: string;
+  /**
+   * Overflow-menu commands rendered behind a three-dot button on the header
+   * row (Duplicate / Disable / Delete, etc.). Omit to hide the menu.
+   */
+  actions?: ActionCardMenuItem[];
   /** Extra badges (e.g. produces / consumes hints). */
   badges?: Array<{
     label: string;
@@ -101,6 +137,9 @@ export const ActionCard: React.FC<ActionCardProps> = ({
   defaultExpanded = true,
   expanded,
   onExpandedChange,
+  onOpenSheet,
+  summary,
+  actions,
   badges,
   children,
   className,
@@ -108,8 +147,16 @@ export const ActionCard: React.FC<ActionCardProps> = ({
 }) => {
   const [internalExpanded, setInternalExpanded] =
     React.useState(defaultExpanded);
-  const isExpanded = expanded ?? internalExpanded;
-  const toggleExpanded = () => {
+  const [menuOpen, setMenuOpen] = React.useState(false);
+  // Sheet mode: the header opens a side sheet instead of expanding inline,
+  // so the card stays a compact summary row at all times.
+  const sheetMode = onOpenSheet !== undefined;
+  const isExpanded = sheetMode ? false : (expanded ?? internalExpanded);
+  const handleHeaderClick = () => {
+    if (sheetMode) {
+      onOpenSheet();
+      return;
+    }
     const next = !isExpanded;
     if (expanded === undefined) setInternalExpanded(next);
     onExpandedChange?.(next);
@@ -139,12 +186,14 @@ export const ActionCard: React.FC<ActionCardProps> = ({
         )}
         <button
           type="button"
-          onClick={toggleExpanded}
+          onClick={handleHeaderClick}
           className="flex items-center flex-1 gap-2 text-left"
-          aria-expanded={isExpanded}
-          aria-controls={`${id}-body`}
+          aria-expanded={sheetMode ? undefined : isExpanded}
+          aria-controls={sheetMode ? undefined : `${id}-body`}
         >
-          {isExpanded ? (
+          {sheetMode ? (
+            <ChevronRight className="w-4 h-4 shrink-0 text-muted-foreground" />
+          ) : isExpanded ? (
             <ChevronDown className="w-4 h-4 shrink-0 text-muted-foreground" />
           ) : (
             <ChevronRight className="w-4 h-4 shrink-0 text-muted-foreground" />
@@ -172,9 +221,9 @@ export const ActionCard: React.FC<ActionCardProps> = ({
                 </Badge>
               ))}
             </div>
-            {description && (
+            {(summary ?? description) && (
               <p className="text-xs truncate text-muted-foreground">
-                {description}
+                {summary ?? description}
               </p>
             )}
             {hasErrors && (
@@ -198,6 +247,45 @@ export const ActionCard: React.FC<ActionCardProps> = ({
             aria-label={enabled ? "Disable action" : "Enable action"}
           />
         )}
+        {actions && actions.length > 0 && (
+          <Popover open={menuOpen} onOpenChange={setMenuOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                type="button"
+                variant="ghost"
+                size="icon"
+                className="w-8 h-8 text-muted-foreground hover:text-foreground shrink-0"
+                aria-label="More actions"
+              >
+                <MoreVertical className="w-4 h-4" />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-48 p-1">
+              <MenuCloseContext.Provider
+                value={{ onClose: () => setMenuOpen(false) }}
+              >
+                {actions.map((item) => (
+                  <DropdownMenuItem
+                    key={item.label}
+                    onClick={item.onClick}
+                    icon={
+                      item.icon ? (
+                        <DynamicIcon name={item.icon} className="w-4 h-4" />
+                      ) : undefined
+                    }
+                    className={
+                      item.variant === "destructive"
+                        ? "text-destructive hover:text-destructive"
+                        : undefined
+                    }
+                  >
+                    {item.label}
+                  </DropdownMenuItem>
+                ))}
+              </MenuCloseContext.Provider>
+            </PopoverContent>
+          </Popover>
+        )}
         {onDelete && (
           <Button
             type="button"

package/src/components/BrandIcon.tsx

@@ -0,0 +1,57 @@
+import type { SVGProps } from "react";
+import type { BrandIconName } from "@checkstack/common";
+
+// Brand marks vendored as inline SVGs.
+//
+// lucide-react v1 removed ALL brand icons (GitHub, GitLab, ...) for trademark
+// reasons, so we ship the handful we actually need ourselves. Path data is the
+// official mark from Simple Icons (https://simpleicons.org), ISC/CC0. Props
+// mirror the slice of the lucide icon surface our call sites use (`className` +
+// pass-through SVG props), so these are drop-in replacements for the old
+// `import { Github } from "lucide-react"`. `fill="currentColor"` makes them
+// inherit text color like a lucide icon does via `stroke="currentColor"`.
+
+type BrandIconProps = SVGProps<SVGSVGElement>;
+
+export const GithubIcon = ({ className, ...props }: BrandIconProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={24}
+    height={24}
+    fill="currentColor"
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+  </svg>
+);
+
+export const GitlabIcon = ({ className, ...props }: BrandIconProps) => (
+  <svg
+    viewBox="0 0 24 24"
+    width={24}
+    height={24}
+    fill="currentColor"
+    className={className}
+    aria-hidden="true"
+    {...props}
+  >
+    <path d="m23.6004 9.5927-.0337-.0862L20.3.9814a.851.851 0 0 0-.3362-.405.8748.8748 0 0 0-.9997.0539.8748.8748 0 0 0-.29.4399l-2.2055 6.748H7.5375l-2.2057-6.748a.8573.8573 0 0 0-.29-.4412.8748.8748 0 0 0-.9997-.0537.8585.8585 0 0 0-.3362.4049L.4332 9.5015l-.0325.0862a6.0657 6.0657 0 0 0 2.0119 7.0105l.0113.0087.03.0213 4.976 3.7264 2.462 1.8633 1.4995 1.1321a1.0085 1.0085 0 0 0 1.2197 0l1.4995-1.1321 2.4619-1.8633 5.006-3.7489.0125-.01a6.0682 6.0682 0 0 0 2.0094-7.003z" />
+  </svg>
+);
+
+/**
+ * Brand-name -> component map. Used by `DynamicIcon` to resolve a data-driven
+ * icon name (e.g. an auth strategy's `icon: "Github"`) to a vendored brand
+ * mark, since these names no longer exist in lucide's `icons` export. Keys are
+ * the `BrandIconName` union from `@checkstack/common`, so adding a brand there
+ * without a component here is a type error.
+ */
+export const brandIcons: Record<
+  BrandIconName,
+  (props: BrandIconProps) => React.JSX.Element
+> = {
+  Github: GithubIcon,
+  Gitlab: GitlabIcon,
+};

package/src/components/CodeEditor/CodeEditor.tsx

@@ -2,12 +2,77 @@
 // `@typefox/monaco-editor-react`-backed `TypefoxEditor` (real VS Code language
 // services in the browser). Consumers (DynamicForm, automation, healthcheck)
 // import this and are unaffected by the underlying editor implementation.
-import { TypefoxEditor } from "./TypefoxEditor";
+import { useEffect, useState, type ComponentType } from "react";
+import { Maximize2 } from "lucide-react";
+import type { TypefoxEditorProps } from "./TypefoxEditor";
+import { popoutTitle } from "./popoutTitle";
 import type { CodeEditorProps } from "./types";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+} from "../Dialog";
+import { Skeleton } from "../Skeleton";
+import { usePerformance } from "../PerformanceProvider";
+import { cn } from "../../utils";
+
+// Load the Monaco-backed editor chunk on demand WITHOUT React.lazy/Suspense.
+//
+// The `import("./TypefoxEditor")` is still dynamic, so the whole `@codingame/*`
+// / Monaco stack stays in its own chunk and off pages that merely import
+// primitives from the `@checkstack/ui` barrel (e.g. the login page) - the
+// bundle-split goal is preserved. But we deliberately do NOT use `React.lazy` +
+// `<Suspense>`: suspending THROUGH `@typefox`'s `MonacoEditorReactComp` makes
+// React (under StrictMode's mount -> unmount -> remount) re-run the wrapper's
+// ONE-SHOT global monaco-vscode init against already-initialized services,
+// throwing "Services are already initialized" so the editor never reaches
+// `onEditorStartDone` and never renders (dev-only; the prod Rollup build is
+// fine). The wrapper expects a stable, non-suspending parent. So we resolve the
+// chunk imperatively and render the wrapper only once it's loaded - a plain,
+// synchronous mount, exactly as the pre-#236 static import behaved.
+let editorModulePromise: Promise<typeof import("./TypefoxEditor")> | undefined;
+const loadEditorModule = (): Promise<typeof import("./TypefoxEditor")> =>
+  (editorModulePromise ??= import("./TypefoxEditor"));
+
+const useTypefoxEditor = (): ComponentType<TypefoxEditorProps> | null => {
+  const [Editor, setEditor] = useState<ComponentType<TypefoxEditorProps> | null>(
+    null,
+  );
+  useEffect(() => {
+    let active = true;
+    void loadEditorModule().then((mod) => {
+      if (active) setEditor(() => mod.TypefoxEditor);
+    });
+    return () => {
+      active = false;
+    };
+  }, []);
+  return Editor;
+};
+
+/**
+ * Placeholder shown while the Monaco chunk loads. A plain `Skeleton` block
+ * (which already honours `usePerformance` / `isLowPower`) sized to the editor's
+ * height, so the layout doesn't jump and low-power devices avoid a heavy
+ * spinner.
+ */
+const EditorLoadingFallback = ({ minHeightPx }: { minHeightPx: number }) => (
+  <Skeleton
+    className="w-full rounded-md"
+    style={{ height: `${minHeightPx}px` }}
+  />
+);
 
 /**
  * Code editor with context-aware IntelliSense, template / shell completion, and
  * structural validation. See `CodeEditorProps`.
+ *
+ * Renders the inline editor with a subtle top-right "expand" affordance that
+ * opens the SAME editor (same `value` / `onChange` / completion props) in a
+ * large full-screen overlay for comfortably editing big scripts. Both the
+ * inline and overlay editors are `TypefoxEditor` instances bound to the same
+ * controlled `value`, so edits stay in sync and closing the overlay keeps them.
  */
 export const CodeEditor = ({
   id,
@@ -21,25 +86,103 @@ export const CodeEditor = ({
   templateProperties,
   shellEnvVars,
   markers,
+  acquireTypes,
+  acquireResetKey,
+  sdkTypes,
+  sdkTypesResetKey,
+  importablePackages,
+  allowPopout = true,
+  title,
+  deferInit,
 }: CodeEditorProps) => {
+  const [popoutOpen, setPopoutOpen] = useState(false);
+  const { isLowPower } = usePerformance();
+  // Resolved Monaco editor component (null until its chunk loads). Loaded
+  // imperatively rather than via React.lazy/Suspense - see loadEditorModule.
+  const TypefoxEditor = useTypefoxEditor();
+
   // CodeEditorProps.minHeight is a CSS length string ("240px"); TypefoxEditor
   // takes a pixel number.
   const minHeightPx = Number.parseInt(minHeight, 10) || 100;
+  const editorId = id ?? "code-editor";
+
+  // Shared editor props for both the inline and overlay instances. The overlay
+  // instance overrides only `id` (a distinct model URI so the two Monaco models
+  // don't fight) and `fillHeight` (so it fills the tall dialog body). Both are
+  // bound to the same `value` / `onChange`, keeping edits in sync.
+  const sharedEditorProps: Omit<TypefoxEditorProps, "id" | "fillHeight"> = {
+    value,
+    onChange,
+    language,
+    minHeight: minHeightPx,
+    readOnly,
+    placeholder,
+    typeDefinitions,
+    templateProperties,
+    shellEnvVars,
+    markers,
+    acquireTypes,
+    acquireResetKey,
+    sdkTypes,
+    sdkTypesResetKey,
+    importablePackages,
+    deferInit,
+  };
+
+  const dialogTitle = title ?? popoutTitle({ language });
 
   return (
-    <TypefoxEditor
-      id={id ?? "code-editor"}
-      value={value}
-      onChange={onChange}
-      language={language}
-      minHeight={minHeightPx}
-      readOnly={readOnly}
-      placeholder={placeholder}
-      typeDefinitions={typeDefinitions}
-      templateProperties={templateProperties}
-      shellEnvVars={shellEnvVars}
-      markers={markers}
-    />
+    <div className="relative">
+      {TypefoxEditor ? (
+        <TypefoxEditor id={editorId} {...sharedEditorProps} />
+      ) : (
+        <EditorLoadingFallback minHeightPx={minHeightPx} />
+      )}
+      {allowPopout && (
+        <button
+          type="button"
+          aria-label="Expand editor"
+          title="Expand editor"
+          onClick={() => setPopoutOpen(true)}
+          className={cn(
+            // Sits above the editor in the top-right corner. A faint background
+            // keeps the muted icon legible over code; hover emphasises it.
+            "absolute right-2 top-2 z-10 inline-flex h-7 w-7 items-center justify-center",
+            "rounded-md bg-background/70 text-muted-foreground",
+            !isLowPower && "backdrop-blur-sm",
+            "transition-colors hover:bg-accent hover:text-accent-foreground",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+          )}
+        >
+          <Maximize2 className="h-4 w-4" />
+        </button>
+      )}
+      <Dialog open={popoutOpen} onOpenChange={setPopoutOpen}>
+        {/* Tall flex column: override the default `overflow-y-auto` so the
+            editor (not the dialog) scrolls internally, and give the body a
+            fixed tall height so the `fillHeight` editor has something to fill. */}
+        <DialogContent
+          size="full"
+          className="flex h-[85dvh] flex-col overflow-hidden overflow-y-hidden"
+        >
+          <DialogHeader>
+            <DialogTitle>{dialogTitle}</DialogTitle>
+          </DialogHeader>
+          {/* The second Monaco instance only mounts while the dialog is open,
+              so there's no double-editor cost when closed. Distinct
+              `${id}-popout` id => distinct model URI. */}
+          {popoutOpen && TypefoxEditor && (
+            <div className="flex-1 min-h-0">
+              <TypefoxEditor
+                id={`${editorId}-popout`}
+                fillHeight
+                {...sharedEditorProps}
+              />
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+    </div>
   );
 };
 
@@ -49,6 +192,8 @@ export type {
   TemplateProperty,
   ShellEnvVar,
   EditorMarker,
+  AcquireTypes,
+  AcquiredTypeFile,
 } from "./types";
 
 export {