@fgv/ts-app-shell 5.1.0-1

package/lib/packlets/drop-zone/JsonDropZone.js

@@ -0,0 +1,149 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stripCodeFences = stripCodeFences;
+exports.JsonDropZone = JsonDropZone;
+const react_1 = __importStar(require("react"));
+/**
+ * Strips markdown code fences from text.
+ * AI agents often wrap JSON in code fences.
+ * @param text - Raw text that may contain code fences
+ * @returns Text with outer code fences removed
+ * @internal
+ */
+function stripCodeFences(text) {
+    const trimmed = text.trim();
+    const fencePattern = /^```(?:\w+)?\s*\n?([\s\S]*?)\n?\s*```$/;
+    const match = fencePattern.exec(trimmed);
+    return match ? match[1].trim() : trimmed;
+}
+/**
+ * Generic JSON drop/paste target with converter-based validation.
+ * Accepts text via drag-and-drop or paste, strips markdown code fences,
+ * parses as JSON, validates through the provided converter, and calls
+ * the appropriate callback.
+ *
+ * @typeParam T - The expected validated type
+ * @public
+ */
+function JsonDropZone(props) {
+    const { converter, onValueReceived, onError, error, hint, className } = props;
+    const [isDragOver, setIsDragOver] = (0, react_1.useState)(false);
+    const [internalError, setInternalError] = (0, react_1.useState)(undefined);
+    const displayError = error !== null && error !== void 0 ? error : internalError;
+    const processText = (0, react_1.useCallback)((rawText) => {
+        setInternalError(undefined);
+        const stripped = stripCodeFences(rawText);
+        let parsed;
+        try {
+            parsed = JSON.parse(stripped);
+        }
+        catch (_a) {
+            const message = 'Invalid JSON: could not parse the dropped text.';
+            setInternalError(message);
+            onError === null || onError === void 0 ? void 0 : onError(message);
+            return;
+        }
+        const result = converter.convert(parsed);
+        if (result.isSuccess()) {
+            setInternalError(undefined);
+            onValueReceived(result.value);
+        }
+        else {
+            const message = `Validation failed: ${result.message}`;
+            setInternalError(message);
+            onError === null || onError === void 0 ? void 0 : onError(message);
+        }
+    }, [converter, onValueReceived, onError]);
+    const handleDragOver = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(true);
+    }, []);
+    const handleDragLeave = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+    }, []);
+    const handleDrop = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setIsDragOver(false);
+        const text = e.dataTransfer.getData('text/plain') || e.dataTransfer.getData('text');
+        if (text) {
+            processText(text);
+        }
+        else {
+            const message = 'No text data found in the dropped content.';
+            setInternalError(message);
+            onError === null || onError === void 0 ? void 0 : onError(message);
+        }
+    }, [processText, onError]);
+    const handlePaste = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        const text = e.clipboardData.getData('text/plain') || e.clipboardData.getData('text');
+        if (text) {
+            processText(text);
+        }
+    }, [processText]);
+    const borderClass = displayError
+        ? 'border-status-error-border bg-status-error-bg'
+        : isDragOver
+            ? 'border-status-info-border bg-status-info-bg'
+            : 'border-border bg-surface-alt';
+    return (react_1.default.createElement("div", { className: `border-2 border-dashed rounded-md p-3 text-center text-sm transition-colors cursor-default ${borderClass} ${className !== null && className !== void 0 ? className : ''}`, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, onPaste: handlePaste, tabIndex: 0, role: "region", "aria-label": hint !== null && hint !== void 0 ? hint : 'Drop or paste JSON here' }, displayError ? (react_1.default.createElement("span", { className: "text-status-error-text text-xs" }, displayError)) : (react_1.default.createElement("span", { className: "text-muted" }, hint !== null && hint !== void 0 ? hint : 'Drop or paste JSON here'))));
+}
+//# sourceMappingURL=JsonDropZone.js.map

package/lib/packlets/drop-zone/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Drop zone packlet - generic JSON drop/paste target with converter-based validation.
+ * @packageDocumentation
+ */
+export { JsonDropZone, type IJsonDropZoneProps } from './JsonDropZone';
+//# sourceMappingURL=index.d.ts.map

package/lib/packlets/drop-zone/index.js

@@ -0,0 +1,10 @@
+"use strict";
+/**
+ * Drop zone packlet - generic JSON drop/paste target with converter-based validation.
+ * @packageDocumentation
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.JsonDropZone = void 0;
+var JsonDropZone_1 = require("./JsonDropZone");
+Object.defineProperty(exports, "JsonDropZone", { enumerable: true, get: function () { return JsonDropZone_1.JsonDropZone; } });
+//# sourceMappingURL=index.js.map

package/lib/packlets/editing/EditFieldHelpers.d.ts

@@ -0,0 +1,171 @@
+/**
+ * Generic edit field helper components for entity editors.
+ *
+ * Provides reusable form field primitives: text inputs, number inputs,
+ * select dropdowns, tag editors, checkboxes, and layout wrappers.
+ * These components are domain-agnostic and can be used by any entity editor.
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Props for the EditField component.
+ * @public
+ */
+export interface IEditFieldProps {
+    /** Label text displayed to the left of the field */
+    readonly label: string;
+    /** The input control(s) to render */
+    readonly children: React.ReactNode;
+}
+/**
+ * Horizontal label + field layout for a single edit field.
+ * @public
+ */
+export declare function EditField({ label, children }: IEditFieldProps): React.ReactElement;
+/**
+ * Props for the EditSection component.
+ * @public
+ */
+export interface IEditSectionProps {
+    /** Section heading text */
+    readonly title: string;
+    /** Section content (typically EditField components) */
+    readonly children: React.ReactNode;
+}
+/**
+ * Titled section wrapper for grouping related edit fields.
+ * @public
+ */
+export declare function EditSection({ title, children }: IEditSectionProps): React.ReactElement;
+/**
+ * Props for the TextInput component.
+ * @public
+ */
+export interface ITextInputProps {
+    /** Current value */
+    readonly value: string;
+    /** Called when value changes */
+    readonly onChange: (value: string) => void;
+    /** Placeholder text */
+    readonly placeholder?: string;
+}
+/**
+ * Single-line text input for required string fields.
+ * @public
+ */
+export declare function TextInput({ value, onChange, placeholder }: ITextInputProps): React.ReactElement;
+/**
+ * Props for the OptionalTextInput component.
+ * @public
+ */
+export interface IOptionalTextInputProps {
+    /** Current value (undefined means empty) */
+    readonly value: string | undefined;
+    /** Called when value changes (empty string → undefined) */
+    readonly onChange: (value: string | undefined) => void;
+    /** Placeholder text */
+    readonly placeholder?: string;
+}
+/**
+ * Single-line text input for optional string fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export declare function OptionalTextInput({ value, onChange, placeholder }: IOptionalTextInputProps): React.ReactElement;
+/**
+ * Props for the TextAreaInput component.
+ * @public
+ */
+export interface ITextAreaInputProps {
+    /** Current value (undefined means empty) */
+    readonly value: string | undefined;
+    /** Called when value changes (empty string → undefined) */
+    readonly onChange: (value: string | undefined) => void;
+    /** Placeholder text */
+    readonly placeholder?: string;
+}
+/**
+ * Multi-line text input for optional string fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export declare function TextAreaInput({ value, onChange, placeholder }: ITextAreaInputProps): React.ReactElement;
+/**
+ * Props for the NumberInput component.
+ * @public
+ */
+export interface INumberInputProps {
+    /** Current value (undefined means empty) */
+    readonly value: number | undefined;
+    /** Called when value changes (empty input → undefined) */
+    readonly onChange: (value: number | undefined) => void;
+    /** Accessible label for the input */
+    readonly label: string;
+    /** Minimum allowed value */
+    readonly min?: number;
+    /** Maximum allowed value */
+    readonly max?: number;
+    /** Step increment */
+    readonly step?: number;
+}
+/**
+ * Numeric input for optional number fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export declare function NumberInput({ value, onChange, label, min, max, step }: INumberInputProps): React.ReactElement;
+/**
+ * Props for the SelectInput component.
+ * @public
+ */
+export interface ISelectInputProps<T extends string> {
+    /** Currently selected value */
+    readonly value: T;
+    /** Available options */
+    readonly options: ReadonlyArray<T>;
+    /** Called when selection changes */
+    readonly onChange: (value: T) => void;
+}
+/**
+ * Dropdown select for enumerated string values.
+ * @public
+ */
+export declare function SelectInput<T extends string>({ value, options, onChange }: ISelectInputProps<T>): React.ReactElement;
+/**
+ * Props for the TagsInput component.
+ * @public
+ */
+export interface ITagsInputProps {
+    /** Current tags (undefined means no tags) */
+    readonly value: ReadonlyArray<string> | undefined;
+    /** Called when tags change (empty → undefined) */
+    readonly onChange: (value: ReadonlyArray<string> | undefined) => void;
+    /** Placeholder text */
+    readonly placeholder?: string;
+}
+/**
+ * Comma-separated tag editor for string arrays.
+ * Empty input produces `undefined`.
+ * @public
+ */
+export declare function TagsInput({ value, onChange, placeholder }: ITagsInputProps): React.ReactElement;
+/**
+ * Props for the CheckboxInput component.
+ * @public
+ */
+export interface ICheckboxInputProps {
+    /** Current value (undefined treated as false) */
+    readonly value: boolean | undefined;
+    /** Called when value changes (false → undefined) */
+    readonly onChange: (value: boolean | undefined) => void;
+    /** Label text displayed next to the checkbox */
+    readonly label: string;
+}
+/**
+ * Checkbox input for optional boolean fields.
+ * Unchecked produces `undefined`.
+ * @public
+ */
+export declare function CheckboxInput({ value, onChange, label }: ICheckboxInputProps): React.ReactElement;
+//# sourceMappingURL=EditFieldHelpers.d.ts.map

package/lib/packlets/editing/EditFieldHelpers.js

@@ -0,0 +1,144 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditField = EditField;
+exports.EditSection = EditSection;
+exports.TextInput = TextInput;
+exports.OptionalTextInput = OptionalTextInput;
+exports.TextAreaInput = TextAreaInput;
+exports.NumberInput = NumberInput;
+exports.SelectInput = SelectInput;
+exports.TagsInput = TagsInput;
+exports.CheckboxInput = CheckboxInput;
+/**
+ * Generic edit field helper components for entity editors.
+ *
+ * Provides reusable form field primitives: text inputs, number inputs,
+ * select dropdowns, tag editors, checkboxes, and layout wrappers.
+ * These components are domain-agnostic and can be used by any entity editor.
+ *
+ * @packageDocumentation
+ */
+const react_1 = __importDefault(require("react"));
+/**
+ * Horizontal label + field layout for a single edit field.
+ * @public
+ */
+function EditField({ label, children }) {
+    return (react_1.default.createElement("div", { className: "flex items-baseline gap-2 py-1" },
+        react_1.default.createElement("label", { className: "text-xs text-muted w-32 shrink-0" }, label),
+        react_1.default.createElement("div", { className: "flex-1" }, children)));
+}
+/**
+ * Titled section wrapper for grouping related edit fields.
+ * @public
+ */
+function EditSection({ title, children }) {
+    return (react_1.default.createElement("div", { className: "mb-4" },
+        react_1.default.createElement("h4", { className: "text-xs font-medium text-muted uppercase tracking-wider mb-1.5" }, title),
+        children));
+}
+/**
+ * Single-line text input for required string fields.
+ * @public
+ */
+function TextInput({ value, onChange, placeholder }) {
+    return (react_1.default.createElement("input", { type: "text", value: value, onChange: (e) => onChange(e.target.value), placeholder: placeholder, className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }));
+}
+/**
+ * Single-line text input for optional string fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+function OptionalTextInput({ value, onChange, placeholder }) {
+    return (react_1.default.createElement("input", { type: "text", value: value !== null && value !== void 0 ? value : '', onChange: (e) => onChange(e.target.value || undefined), placeholder: placeholder, className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }));
+}
+/**
+ * Multi-line text input for optional string fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+function TextAreaInput({ value, onChange, placeholder }) {
+    return (react_1.default.createElement("textarea", { value: value !== null && value !== void 0 ? value : '', onChange: (e) => onChange(e.target.value || undefined), placeholder: placeholder, rows: 3, className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring resize-y" }));
+}
+/**
+ * Numeric input for optional number fields.
+ * Empty input produces `undefined`.
+ * @public
+ */
+function NumberInput({ value, onChange, label, min, max, step }) {
+    return (react_1.default.createElement("input", { type: "number", value: value !== null && value !== void 0 ? value : '', onChange: (e) => {
+            const raw = e.target.value;
+            if (!raw.trim()) {
+                onChange(undefined);
+            }
+            else {
+                const num = parseFloat(raw);
+                if (!isNaN(num)) {
+                    onChange(num);
+                }
+            }
+        }, min: min, max: max, step: step !== null && step !== void 0 ? step : 0.1, className: "w-24 px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring text-right", "aria-label": label }));
+}
+/**
+ * Dropdown select for enumerated string values.
+ * @public
+ */
+function SelectInput({ value, options, onChange }) {
+    return (react_1.default.createElement("select", { value: value, onChange: (e) => onChange(e.target.value), className: "px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }, options.map((opt) => (react_1.default.createElement("option", { key: opt, value: opt }, opt)))));
+}
+/**
+ * Comma-separated tag editor for string arrays.
+ * Empty input produces `undefined`.
+ * @public
+ */
+function TagsInput({ value, onChange, placeholder }) {
+    var _a;
+    const text = (_a = value === null || value === void 0 ? void 0 : value.join(', ')) !== null && _a !== void 0 ? _a : '';
+    return (react_1.default.createElement("input", { type: "text", value: text, onChange: (e) => {
+            const raw = e.target.value;
+            if (!raw.trim()) {
+                onChange(undefined);
+            }
+            else {
+                onChange(raw
+                    .split(',')
+                    .map((s) => s.trim())
+                    .filter((s) => s.length > 0));
+            }
+        }, placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : 'comma-separated values', className: "w-full px-2 py-1 text-sm border border-border rounded focus:outline-none focus:ring-1 focus:ring-focus-ring focus:border-focus-ring" }));
+}
+/**
+ * Checkbox input for optional boolean fields.
+ * Unchecked produces `undefined`.
+ * @public
+ */
+function CheckboxInput({ value, onChange, label }) {
+    return (react_1.default.createElement("label", { className: "flex items-center gap-2 text-sm text-secondary cursor-pointer" },
+        react_1.default.createElement("input", { type: "checkbox", checked: value !== null && value !== void 0 ? value : false, onChange: (e) => onChange(e.target.checked || undefined), className: "rounded border-border text-brand-primary focus:ring-focus-ring" }),
+        label));
+}
+//# sourceMappingURL=EditFieldHelpers.js.map

package/lib/packlets/editing/MultiActionButton.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Multi-action button component with dropdown for alternative actions.
+ * @packageDocumentation
+ */
+import React from 'react';
+/**
+ * Action definition for multi-action button.
+ * @public
+ */
+export interface IMultiActionButtonAction {
+    /** Unique identifier for the action. */
+    readonly id: string;
+    /** Display label for the action. */
+    readonly label: string;
+    /** Optional icon element to display before the label. */
+    readonly icon?: React.ReactNode;
+    /** Callback when this action is selected. */
+    readonly onSelect: () => void;
+}
+/**
+ * Props for MultiActionButton component.
+ * @public
+ */
+export interface IMultiActionButtonProps {
+    /** Primary action that appears on the main button. */
+    readonly primaryAction: IMultiActionButtonAction;
+    /** Alternative actions shown in the dropdown menu. */
+    readonly alternativeActions: readonly IMultiActionButtonAction[];
+    /** Optional variant for button styling. */
+    readonly variant?: 'primary' | 'default' | 'danger';
+    /** If true, the primary action button is disabled. */
+    readonly disabled?: boolean;
+    /** If true, the dropdown toggle is disabled. Defaults to `disabled`. */
+    readonly dropdownDisabled?: boolean;
+    /** Optional CSS class name. */
+    readonly className?: string;
+}
+/**
+ * Multi-action button with dropdown for alternative actions.
+ * Similar to Git commit button with "Commit", "Commit & Push", etc.
+ *
+ * @public
+ */
+export declare function MultiActionButton(props: IMultiActionButtonProps): React.ReactElement;
+//# sourceMappingURL=MultiActionButton.d.ts.map

package/lib/packlets/editing/MultiActionButton.js

@@ -0,0 +1,109 @@
+"use strict";
+/*
+ * Copyright (c) 2026 Erik Fortune
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiActionButton = MultiActionButton;
+/**
+ * Multi-action button component with dropdown for alternative actions.
+ * @packageDocumentation
+ */
+const react_1 = __importStar(require("react"));
+const solid_1 = require("@heroicons/react/20/solid");
+// ============================================================================
+// Component
+// ============================================================================
+/**
+ * Multi-action button with dropdown for alternative actions.
+ * Similar to Git commit button with "Commit", "Commit & Push", etc.
+ *
+ * @public
+ */
+function MultiActionButton(props) {
+    const { primaryAction, alternativeActions, variant = 'primary', disabled = false, dropdownDisabled, className = '' } = props;
+    const isDropdownDisabled = dropdownDisabled !== null && dropdownDisabled !== void 0 ? dropdownDisabled : disabled;
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const dropdownRef = (0, react_1.useRef)(null);
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsOpen(false);
+            }
+        };
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            return () => document.removeEventListener('mousedown', handleClickOutside);
+        }
+    }, [isOpen]);
+    const variantClasses = {
+        primary: 'bg-brand-primary hover:bg-brand-primary/90 text-white',
+        default: 'bg-surface-raised hover:bg-surface-raised text-secondary',
+        danger: 'bg-status-error-btn hover:bg-status-error-btn-hover text-white'
+    };
+    const baseClasses = 'inline-flex items-center text-xs font-medium rounded transition-colors disabled:opacity-40 disabled:cursor-not-allowed';
+    return (react_1.default.createElement("div", { className: `relative inline-flex ${className}`, ref: dropdownRef },
+        react_1.default.createElement("button", { type: "button", onClick: primaryAction.onSelect, disabled: disabled, className: `${baseClasses} ${variantClasses[variant]} px-2.5 py-1 ${alternativeActions.length > 0 ? 'rounded-r-none' : 'rounded'}` },
+            primaryAction.icon,
+            react_1.default.createElement("span", null, primaryAction.label)),
+        alternativeActions.length > 0 && (react_1.default.createElement("button", { type: "button", onClick: () => setIsOpen(!isOpen), disabled: isDropdownDisabled, className: `${baseClasses} ${variantClasses[variant]} px-1 py-1 rounded-l-none border-l border-white/20` },
+            react_1.default.createElement(solid_1.ChevronDownIcon, { className: "h-3.5 w-3.5" }))),
+        isOpen && alternativeActions.length > 0 && (react_1.default.createElement("div", { className: "absolute top-full right-0 mt-1 w-48 bg-surface rounded-md shadow-lg border border-border py-1 z-50" }, alternativeActions.map((action) => (react_1.default.createElement("button", { key: action.id, type: "button", onClick: () => {
+                action.onSelect();
+                setIsOpen(false);
+            }, className: "w-full text-left px-3 py-2 text-xs text-secondary hover:bg-surface-raised flex items-center gap-2" },
+            action.icon,
+            react_1.default.createElement("span", null, action.label))))))));
+}
+//# sourceMappingURL=MultiActionButton.js.map