@mindlogic-ai/logician-ui 4.0.0-alpha.35 → 4.0.0-alpha.37

package/dist/components/Workflow/useWorkflowActions.mjs

@@ -0,0 +1,103 @@
+"use client";
+import { useCallback, useMemo } from 'react';
+import { useReactFlow, useStoreApi } from '@xyflow/react';
+import { createNodeFromType, genId, toDefaultsTranslate } from './createNode.mjs';
+import { findFreeExit, planNodePlacement, FALLBACK_NODE_SIZE } from './placement.mjs';
+import { useWorkflow } from './WorkflowContext/WorkflowContext.mjs';
+
+/** Pan duration when `addNode` brings the new node into view. */
+const PAN_MS = 300;
+/**
+ * Imperative editor actions for content rendered inside `<Workflow>` (its
+ * `children` and render slots sit inside the canvas's React Flow provider).
+ * Hosts use this instead of re-implementing node creation and placement — the
+ * tap-to-add palette on touch devices being the first caller.
+ *
+ * Must be called from a component rendered inside `<Workflow>`.
+ */
+function useWorkflowActions() {
+    const { graph, dispatch, getNodeType, translate, hostBridge, readOnly, editor: { drawerTarget }, setSelectedNodeId, setSelectedEdgeId, setDrawerTarget, } = useWorkflow();
+    const { getNode, getViewport, setCenter } = useReactFlow();
+    const store = useStoreApi();
+    const getAddAfterSource = useCallback((nodeId) => {
+        const exit = findFreeExit(graph, getNodeType, nodeId);
+        if (!exit)
+            return null;
+        const def = getNodeType(exit.node.kind);
+        const label = def?.getInstanceTitle?.(exit.node.config) || def?.label || exit.node.id;
+        return { nodeId: exit.node.id, sourceHandle: exit.sourceHandle, label };
+    }, [graph, getNodeType]);
+    const canAddAfter = useCallback((nodeId) => getAddAfterSource(nodeId) !== null, [getAddAfterSource]);
+    const addNode = useCallback((kind, target, { inspector = 'follow' } = {}) => {
+        if (readOnly)
+            return null;
+        const def = getNodeType(kind);
+        if (!def)
+            return null;
+        const draft = createNodeFromType(def, {
+            position: { x: 0, y: 0 },
+            nodes: graph.nodes,
+            translate: toDefaultsTranslate(translate),
+            hostBridge,
+        });
+        // `nextNodeId` returns a fixed id for singletons (`start`); a second one
+        // would be dropped by the reducer's dedupe, so report it instead.
+        if (graph.nodes.some((n) => n.id === draft.id))
+            return null;
+        // Centre of the visible pane, in flow coordinates.
+        const { width, height } = store.getState();
+        const viewport = getViewport();
+        const viewportCenter = {
+            x: (width / 2 - viewport.x) / viewport.zoom,
+            y: (height / 2 - viewport.y) / viewport.zoom,
+        };
+        const { position, edge } = planNodePlacement({
+            graph,
+            getNodeType,
+            node: draft,
+            target,
+            viewportCenter,
+            edgeId: genId('e'),
+            getNodeSize: (id) => {
+                const { width: w, height: h } = getNode(id)?.measured ?? {};
+                return w && h ? { width: w, height: h } : undefined;
+            },
+        });
+        const node = { ...draft, position };
+        dispatch({
+            type: 'addNodeWithEdge',
+            node,
+            autoConnectFrom: edge ? { edge } : null,
+        });
+        // Select the new node so a follow-up `{ after: selected }` chains on.
+        setSelectedNodeId(node.id);
+        setSelectedEdgeId(null);
+        if (inspector === 'open' || (inspector === 'follow' && drawerTarget)) {
+            setDrawerTarget({ type: 'node', id: node.id });
+        }
+        else if (inspector === 'close') {
+            setDrawerTarget(null);
+        }
+        void setCenter(position.x + FALLBACK_NODE_SIZE.width / 2, position.y + FALLBACK_NODE_SIZE.height / 2, { zoom: viewport.zoom, duration: PAN_MS });
+        return { nodeId: node.id, edgeId: edge?.id ?? null };
+    }, [
+        readOnly,
+        getNodeType,
+        graph,
+        translate,
+        hostBridge,
+        store,
+        getViewport,
+        getNode,
+        dispatch,
+        setSelectedNodeId,
+        setSelectedEdgeId,
+        drawerTarget,
+        setDrawerTarget,
+        setCenter,
+    ]);
+    return useMemo(() => ({ addNode, getAddAfterSource, canAddAfter }), [addNode, getAddAfterSource, canAddAfter]);
+}
+
+export { useWorkflowActions };
+//# sourceMappingURL=useWorkflowActions.mjs.map

package/dist/components/Workflow/useWorkflowActions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWorkflowActions.mjs","sources":["../../../src/components/Workflow/useWorkflowActions.ts"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/dist/index.d.ts

@@ -3,6 +3,7 @@ export * from './components/Appear';
 export * from './components/Avatar';
 export * from './components/Badge';
 export * from './components/Banner';
+export * from './components/BottomSheet';
 export * from './components/Breadcrumb';
 export * from './components/Button';
 export * from './components/Card';

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,cAAc,wBAAwB,CAAC;AACvC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,yBAAyB,CAAC;AACxC,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sBAAsB,CAAC;AACrC,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,6BAA6B,CAAC;AAC5C,cAAc,oBAAoB,CAAC;AAGnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AAGtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,0BAA0B,CAAC;AACzC,cAAc,wBAAwB,CAAC;AAGvC,YAAY,EAAE,SAAS,EAAE,MAAM,qCAAqC,CAAC;AACrE,cAAc,yBAAyB,CAAC;AAGxC,YAAY,EACV,WAAW,EACX,SAAS,IAAI,eAAe,GAC7B,MAAM,qCAAqC,CAAC;AAC7C,OAAO,EAAE,UAAU,EAAE,MAAM,qCAAqC,CAAC;AACjE,OAAO,EAAE,eAAe,EAAE,MAAM,0CAA0C,CAAC;AAG3E,cAAc,2BAA2B,CAAC;AAC1C,cAAc,yBAAyB,CAAC;AAGxC,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AAGvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,uBAAuB,CAAC;AACtC,cAAc,sBAAsB,CAAC;AACrC,cAAc,iCAAiC,CAAC;AAChD,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AAGrC,cAAc,yBAAyB,CAAC;AAGxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC;AAGtC,cAAc,0BAA0B,CAAC;AACzC,cAAc,6BAA6B,CAAC;AAG5C,cAAc,oBAAoB,CAAC;AACnC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,+BAA+B,CAAC;AAC9C,cAAc,mCAAmC,CAAC;AAClD,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,sBAAsB,CAAC;AACrC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,qBAAqB,CAAC;AAGpC,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,oBAAoB,CAAC;AACnC,cAAc,sBAAsB,CAAC;AACrC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AAEtC,OAAO,EACL,OAAO,EACP,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,IAAI,EACJ,SAAS,EACT,QAAQ,EACR,OAAO,EACP,QAAQ,EACR,IAAI,GACL,MAAM,yBAAyB,CAAC;AAKjC,YAAY,EACV,YAAY,EACZ,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,OAAO,EACP,eAAe,EACf,YAAY,EACZ,aAAa,EACb,YAAY,EACZ,aAAa,EACb,SAAS,EACT,kBAAkB,EAClB,eAAe,GAChB,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,YAAY,EAAE,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGnE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AACxD,OAAO,EACL,MAAM,EACN,KAAK,kBAAkB,EACvB,cAAc,GACf,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACrD,OAAO,EACL,eAAe,EACf,SAAS,EACT,OAAO,EACP,kBAAkB,EAClB,iBAAiB,EACjB,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,gBAAgB,GACtB,MAAM,gBAAgB,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EACL,cAAc,EACd,KAAK,YAAY,EACjB,YAAY,GACb,MAAM,sBAAsB,CAAC;AAG9B,YAAY,EACV,oBAAoB,EACpB,gBAAgB,EAChB,cAAc,GACf,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -10,6 +10,15 @@ var Avatar = require('./components/Avatar/Avatar.js');
 var Badge = require('./components/Badge/Badge.js');
 var Badge_styles = require('./components/Badge/Badge.styles.js');
 var Banner = require('./components/Banner/Banner.js');
+var BottomSheet = require('./components/BottomSheet/BottomSheet.js');
+var BottomSheet_styles = require('./components/BottomSheet/BottomSheet.styles.js');
+var BottomSheetBody = require('./components/BottomSheet/BottomSheetBody.js');
+var BottomSheetCloseButton = require('./components/BottomSheet/BottomSheetCloseButton.js');
+var BottomSheetContent = require('./components/BottomSheet/BottomSheetContent.js');
+var BottomSheetContext = require('./components/BottomSheet/BottomSheetContext.js');
+var BottomSheetFooter = require('./components/BottomSheet/BottomSheetFooter.js');
+var BottomSheetHeader = require('./components/BottomSheet/BottomSheetHeader.js');
+var BottomSheetOverlay = require('./components/BottomSheet/BottomSheetOverlay.js');
 var Breadcrumb = require('./components/Breadcrumb/Breadcrumb.js');
 var BreadcrumbItem = require('./components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.js');
 var BreadcrumbLink = require('./components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.js');
@@ -164,6 +173,7 @@ var NodeShell_styles = require('./components/Workflow/canvas/NodeShell/NodeShell
 var workflowLabelProps = require('./components/Workflow/canvas/workflowLabelProps.js');
 var graphObserver = require('./components/Workflow/graphObserver.js');
 var graphReducer = require('./components/Workflow/graphReducer.js');
+var useWorkflowActions = require('./components/Workflow/useWorkflowActions.js');
 var Workflow = require('./components/Workflow/Workflow.js');
 var Workflow_types = require('./components/Workflow/Workflow.types.js');
 var WorkflowContext = require('./components/Workflow/WorkflowContext/WorkflowContext.js');
@@ -200,6 +210,16 @@ exports.Badge = Badge.Badge;
 exports.badgeStyles = Badge_styles.baseStyles;
 exports.badgeVariantStyles = Badge_styles.variantStyles;
 exports.Banner = Banner.Banner;
+exports.BottomSheet = BottomSheet.BottomSheet;
+exports.bottomSheetAnatomy = BottomSheet_styles.bottomSheetAnatomy;
+exports.bottomSheetSlotRecipe = BottomSheet_styles.bottomSheetSlotRecipe;
+exports.BottomSheetBody = BottomSheetBody.BottomSheetBody;
+exports.BottomSheetCloseButton = BottomSheetCloseButton.BottomSheetCloseButton;
+exports.BottomSheetContent = BottomSheetContent.BottomSheetContent;
+exports.useBottomSheetContext = BottomSheetContext.useBottomSheetContext;
+exports.BottomSheetFooter = BottomSheetFooter.BottomSheetFooter;
+exports.BottomSheetHeader = BottomSheetHeader.BottomSheetHeader;
+exports.BottomSheetOverlay = BottomSheetOverlay.BottomSheetOverlay;
 exports.Breadcrumb = Breadcrumb.Breadcrumb;
 exports.BreadcrumbItem = BreadcrumbItem.BreadcrumbItem;
 exports.BreadcrumbLink = BreadcrumbLink.BreadcrumbLink;
@@ -405,6 +425,7 @@ exports.WorkflowGraphObserverContext = graphObserver.WorkflowGraphObserverContex
 exports.useWorkflowGraphObserver = graphObserver.useWorkflowGraphObserver;
 exports.emptyGraph = graphReducer.emptyGraph;
 exports.graphReducer = graphReducer.graphReducer;
+exports.useWorkflowActions = useWorkflowActions.useWorkflowActions;
 exports.Workflow = Workflow.Workflow;
 exports.defineNodeType = Workflow_types.defineNodeType;
 exports.resolveDefaultConfig = Workflow_types.resolveDefaultConfig;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.mjs

@@ -8,6 +8,15 @@ export { Avatar } from './components/Avatar/Avatar.mjs';
 export { Badge } from './components/Badge/Badge.mjs';
 export { baseStyles as badgeStyles, variantStyles as badgeVariantStyles } from './components/Badge/Badge.styles.mjs';
 export { Banner } from './components/Banner/Banner.mjs';
+export { BottomSheet } from './components/BottomSheet/BottomSheet.mjs';
+export { bottomSheetAnatomy, bottomSheetSlotRecipe } from './components/BottomSheet/BottomSheet.styles.mjs';
+export { BottomSheetBody } from './components/BottomSheet/BottomSheetBody.mjs';
+export { BottomSheetCloseButton } from './components/BottomSheet/BottomSheetCloseButton.mjs';
+export { BottomSheetContent } from './components/BottomSheet/BottomSheetContent.mjs';
+export { useBottomSheetContext } from './components/BottomSheet/BottomSheetContext.mjs';
+export { BottomSheetFooter } from './components/BottomSheet/BottomSheetFooter.mjs';
+export { BottomSheetHeader } from './components/BottomSheet/BottomSheetHeader.mjs';
+export { BottomSheetOverlay } from './components/BottomSheet/BottomSheetOverlay.mjs';
 export { Breadcrumb } from './components/Breadcrumb/Breadcrumb.mjs';
 export { BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem/BreadcrumbItem.mjs';
 export { BreadcrumbLink } from './components/Breadcrumb/BreadcrumbLink/BreadcrumbLink.mjs';
@@ -162,6 +171,7 @@ export { CARD_WIDTH, MAX_META_CHIPS, PORT_STYLE, metaChipStyles } from './compon
 export { workflowLabelProps } from './components/Workflow/canvas/workflowLabelProps.mjs';
 export { WorkflowGraphObserverContext, useWorkflowGraphObserver } from './components/Workflow/graphObserver.mjs';
 export { emptyGraph, graphReducer } from './components/Workflow/graphReducer.mjs';
+export { useWorkflowActions } from './components/Workflow/useWorkflowActions.mjs';
 export { Workflow } from './components/Workflow/Workflow.mjs';
 export { defineNodeType, resolveDefaultConfig } from './components/Workflow/Workflow.types.mjs';
 export { WorkflowProvider, useWorkflow, useWorkflowTranslate } from './components/Workflow/WorkflowContext/WorkflowContext.mjs';

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/translations/Defaults.translations.json.js

@@ -227,6 +227,13 @@ var deleting = {
 	ja: "削除中",
 	es: "Eliminando"
 };
+var close = {
+	ko: "닫기",
+	en: "Close",
+	zh: "关闭",
+	ja: "閉じる",
+	es: "Cerrar"
+};
 var defaultTranslations = {
 	get_started: get_started,
 	next: next,
@@ -266,11 +273,13 @@ var defaultTranslations = {
 	es: "Eliminar"
 },
 	downloading: downloading,
-	deleting: deleting
+	deleting: deleting,
+	close: close
 };
 
 exports.anonymous = anonymous;
 exports.clear = clear;
+exports.close = close;
 exports.component = component;
 exports.copied = copied;
 exports.copy = copy;

package/dist/translations/Defaults.translations.json.js.map

@@ -1 +1 @@
-{"version":3,"file":"Defaults.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Defaults.translations.json.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/translations/Defaults.translations.json.mjs

@@ -223,6 +223,13 @@ var deleting = {
 	ja: "削除中",
 	es: "Eliminando"
 };
+var close = {
+	ko: "닫기",
+	en: "Close",
+	zh: "关闭",
+	ja: "閉じる",
+	es: "Cerrar"
+};
 var defaultTranslations = {
 	get_started: get_started,
 	next: next,
@@ -262,8 +269,9 @@ var defaultTranslations = {
 	es: "Eliminar"
 },
 	downloading: downloading,
-	deleting: deleting
+	deleting: deleting,
+	close: close
 };
 
-export { anonymous, clear, component, copied, copy, copy_error_details, defaultTranslations as default, deleting, download, downloading, error_boundary_default_message, error_boundary_subtitle, error_boundary_title, error_details_copied, error_id, get_started, go_next_page_button, month_range_placeholder, next, page, pagination_items_per_page, pagination_range_text, previous, refresh_page, see_less, see_more, support_help_text, support_information, time, try_again, unknown, upload_your_file, user_id };
+export { anonymous, clear, close, component, copied, copy, copy_error_details, defaultTranslations as default, deleting, download, downloading, error_boundary_default_message, error_boundary_subtitle, error_boundary_title, error_details_copied, error_id, get_started, go_next_page_button, month_range_placeholder, next, page, pagination_items_per_page, pagination_range_text, previous, refresh_page, see_less, see_more, support_help_text, support_information, time, try_again, unknown, upload_your_file, user_id };
 //# sourceMappingURL=Defaults.translations.json.mjs.map

package/dist/translations/Defaults.translations.json.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"Defaults.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Defaults.translations.json.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mindlogic-ai/logician-ui",
-  "version": "4.0.0-alpha.35",
+  "version": "4.0.0-alpha.37",
   "description": "A comprehensive React design system built on Chakra UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -53,6 +53,7 @@
     "check-exports": "node check-component-exports.js"
   },
   "peerDependencies": {
+    "@ark-ui/react": "^5.39.0",
     "@chakra-ui/react": "^3.3.0",
     "@emotion/react": "^11.11.0",
     "next": "^13.0.0 || ^14.0.0 || ^15.0.0 || ^16.0.0",
@@ -87,6 +88,7 @@
     "shiki": "^1.22.0"
   },
   "devDependencies": {
+    "@ark-ui/react": "5.39.0",
     "@chakra-ui/react": "^3.3.0",
     "@changesets/cli": "^2.27.0",
     "@emotion/react": "^11.11.0",

package/src/components/BottomSheet/BottomSheet.stories.tsx

@@ -0,0 +1,205 @@
+/**
+ * BottomSheet stories.
+ *
+ * Built on Ark UI's `Drawer` (zag-js), so the sheet can be dragged by its
+ * handle or body, rests on `snapPoints`, and is swiped away past
+ * `closeThreshold`. Open the stories in a mobile viewport (or with touch
+ * emulation) to try the gestures; with a mouse the same drags work by
+ * pointer.
+ */
+import { Box, HStack, Stack } from '@chakra-ui/react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { useState } from 'react';
+
+import { Button } from '../Button';
+import {
+  BoltIcon,
+  ClockIcon,
+  CodeIcon,
+  FilterIcon,
+  MailIcon,
+  MessageDotsIcon,
+  SearchIcon,
+  WorldIcon,
+} from '../Icon';
+import { Subtext, Text } from '../Typography';
+import {
+  BottomSheet,
+  BottomSheetBody,
+  BottomSheetCloseButton,
+  BottomSheetContent,
+  BottomSheetFooter,
+  BottomSheetHeader,
+} from '.';
+
+const meta = {
+  title: 'Components/BottomSheet',
+  component: BottomSheet,
+  parameters: {
+    layout: 'centered',
+    viewport: { defaultViewport: 'mobile2' },
+  },
+} satisfies Meta<typeof BottomSheet>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const PALETTE = [
+  { icon: MessageDotsIcon, label: 'LLM', hint: '모델에게 프롬프트를 보냅니다' },
+  { icon: SearchIcon, label: '지식 검색', hint: '연결된 문서에서 찾습니다' },
+  { icon: WorldIcon, label: '웹 검색', hint: '인터넷에서 찾습니다' },
+  { icon: FilterIcon, label: '조건 분기', hint: '조건에 따라 경로를 나눕니다' },
+  { icon: CodeIcon, label: '코드 실행', hint: 'Python 코드를 실행합니다' },
+  { icon: BoltIcon, label: 'HTTP 요청', hint: '외부 API 를 호출합니다' },
+  { icon: MailIcon, label: '메일 보내기', hint: '결과를 메일로 보냅니다' },
+  { icon: ClockIcon, label: '대기', hint: '정해진 시간만큼 멈춥니다' },
+];
+
+const PaletteList = ({ onPick }: { onPick: (label: string) => void }) => (
+  <Stack as="ul" gap="1" listStyleType="none" m="0" p="0">
+    {PALETTE.map(({ icon: Icon, label, hint }) => (
+      <Box as="li" key={label}>
+        <HStack
+          as="button"
+          w="full"
+          gap="3"
+          px="3"
+          py="2.5"
+          borderRadius="l2"
+          textAlign="start"
+          _hover={{ bg: 'bg.muted' }}
+          onClick={() => onPick(label)}
+        >
+          <Icon boxSize="sm" aria-hidden />
+          <Stack gap="0">
+            <Text fontWeight="semibold">{label}</Text>
+            <Subtext color="fg.muted">{hint}</Subtext>
+          </Stack>
+        </HStack>
+      </Box>
+    ))}
+  </Stack>
+);
+
+/** A node palette — the case this component was added for. */
+export const Palette: Story = {
+  args: {},
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const [picked, setPicked] = useState<string | null>(null);
+
+    return (
+      <Stack align="center">
+        <Button onClick={() => setOpen(true)}>노드 추가</Button>
+        {picked && <Subtext>추가됨: {picked}</Subtext>}
+        <BottomSheet
+          {...args}
+          open={open}
+          onOpenChange={(e) => setOpen(e.open)}
+        >
+          <BottomSheetContent>
+            <BottomSheetHeader>노드 추가</BottomSheetHeader>
+            <BottomSheetCloseButton />
+            <BottomSheetBody>
+              <PaletteList
+                onPick={(label) => {
+                  setPicked(label);
+                  setOpen(false);
+                }}
+              />
+            </BottomSheetBody>
+          </BottomSheetContent>
+        </BottomSheet>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Non-modal, resting on two snap points: 40% of the viewport, then fully open.
+ * No overlay, no focus trap — the page behind stays usable, which is what a
+ * palette beside a canvas needs.
+ */
+export const NonModalSnapPoints: Story = {
+  args: {},
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+    const [clicks, setClicks] = useState(0);
+
+    return (
+      <Stack align="center">
+        <HStack>
+          <Button onClick={() => setOpen((o) => !o)}>
+            {open ? '시트 닫기' : '시트 열기'}
+          </Button>
+          <Button variant="outline" onClick={() => setClicks((c) => c + 1)}>
+            뒤의 페이지 버튼 ({clicks})
+          </Button>
+        </HStack>
+        <BottomSheet
+          {...args}
+          modal={false}
+          closeOnInteractOutside={false}
+          snapPoints={[0.4, 1]}
+          defaultSnapPoint={0.4}
+          open={open}
+          onOpenChange={(e) => setOpen(e.open)}
+        >
+          <BottomSheetContent>
+            <BottomSheetHeader>노드 추가</BottomSheetHeader>
+            <BottomSheetCloseButton />
+            <BottomSheetBody>
+              <PaletteList onPick={() => {}} />
+            </BottomSheetBody>
+          </BottomSheetContent>
+        </BottomSheet>
+      </Stack>
+    );
+  },
+};
+
+/**
+ * Long content: the body scrolls inside the sheet's 85dvh cap while the header
+ * and footer stay put. Dragging starts only once the list is at its top.
+ */
+export const LongScrollingList: Story = {
+  args: {},
+  render: (args) => {
+    const [open, setOpen] = useState(false);
+
+    return (
+      <>
+        <Button onClick={() => setOpen(true)}>긴 목록 열기</Button>
+        <BottomSheet
+          {...args}
+          open={open}
+          onOpenChange={(e) => setOpen(e.open)}
+        >
+          <BottomSheetContent>
+            <BottomSheetHeader>항목 120개</BottomSheetHeader>
+            <BottomSheetCloseButton />
+            <BottomSheetBody>
+              <Stack as="ol" gap="0" m="0" ps="5">
+                {Array.from({ length: 120 }, (_, i) => (
+                  <Text as="li" key={i} py="2">
+                    항목 {i + 1}
+                  </Text>
+                ))}
+              </Stack>
+            </BottomSheetBody>
+            <BottomSheetFooter>
+              <Button variant="ghost" onClick={() => setOpen(false)}>
+                취소
+              </Button>
+              <Button variant="solid" onClick={() => setOpen(false)}>
+                확인
+              </Button>
+            </BottomSheetFooter>
+          </BottomSheetContent>
+        </BottomSheet>
+      </>
+    );
+  },
+};