@pstdio/ui 0.43.0 → 0.43.1-nightly.20261013030813

package/README.md

@@ -46,6 +46,17 @@ gets its own entry: `./rich-text`, `./param-editor`, `./kanban-renderer`,
 from the root entry may import one of those, or every consumer's bundler emits the
 heavy chunks even when the consumer never renders the feature.
 
+## Chat Layout
+
+`ChatPanel` fills its parent pane. The transcript and composer share a centered
+column with a maximum width of `52rem`, defined by the `chat-content` size token
+and `chatContent` layer style. Narrow panes use their available width. Keep the
+scroll area at the full pane width so its scrollbar stays at the pane edge.
+
+The [chat width stories](src/components/chat-ui/components/chat-panel-width.stories.tsx)
+cover wide, narrow, and empty panes. The matching Pencil frame is `Oc0qI` in
+[the design system](../../design/prompt-studio-design-system.pen).
+
 ## Contributor Workflow
 
 1. Implement or update the component in `src/components`.

package/dist/{MermaidComponent-X7N-8w2S.js → MermaidComponent-CJCip-GB.js}

@@ -1,5 +1,5 @@
-import { g as e } from "./markdown-editor-CN4qOKky.js";
-import { t } from "./mermaid-renderer-DybQ_2Cp.js";
+import { g as e } from "./markdown-editor-6jAy_E3r.js";
+import { t } from "./mermaid-renderer-BtW_13Sz.js";
 import { Box as n, Button as r, Flex as i, Textarea as a } from "@chakra-ui/react";
 import { c as o } from "react/compiler-runtime";
 import { jsx as s, jsxs as c } from "react/jsx-runtime";
@@ -87,4 +87,4 @@ function m(m) {
 //#endregion
 export { m as default };
 
-//# sourceMappingURL=MermaidComponent-X7N-8w2S.js.map
+//# sourceMappingURL=MermaidComponent-CJCip-GB.js.map

package/dist/{MermaidComponent-X7N-8w2S.js.map → MermaidComponent-CJCip-GB.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MermaidComponent-X7N-8w2S.js","names":["Box","Button","Flex","Textarea","useLexicalComposerContext","useLexicalEditable","$getNodeByKey","useEffect","useState","MermaidRenderer","$isMermaidNode","MermaidComponentProps","code","nodeKey","MermaidComponent","props","$","_c","editor","isEditable","isEditing","setIsEditing","draftCode","setDraftCode","previewCode","setPreviewCode","t0","t1","t2","update","node","setCode","commitCodeChanges","t3","cancelEditing","t4","undefined","t5","t6","t7","Symbol","for","event","target","value","t8","t9","_c","$isMermaidNode","MermaidComponent","$","c","props","editor","useLexicalComposerContext","isEditable","useLexicalEditable","isEditing","setIsEditing","useState","draftCode","setDraftCode","code","previewCode","setPreviewCode","t0","t1","useEffect","t2","nodeKey","node","$getNodeByKey","commitCodeChanges","t3","cancelEditing","t4","t5","MermaidRenderer","Button","t6","Flex","t7","event","t8","Box","Textarea","t9"],"sources":["../src/components/rich-text/shared/plugins/MermaidPlugin/MermaidComponent.tsx"],"sourcesContent":["import { Box, Button, Flex, Textarea } from \"@chakra-ui/react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useLexicalEditable } from \"@lexical/react/useLexicalEditable\";\nimport { $getNodeByKey } from \"lexical\";\nimport { useEffect, useState } from \"react\";\nimport { MermaidRenderer } from \"@/components/mermaid-renderer\";\nimport { $isMermaidNode } from \"./MermaidNode\";\n\ninterface MermaidComponentProps {\n  code: string;\n  nodeKey: string;\n}\n\nexport default function MermaidComponent(props: MermaidComponentProps) {\n  const { code, nodeKey } = props;\n  const [editor] = useLexicalComposerContext();\n  const isEditable = useLexicalEditable();\n  const [isEditing, setIsEditing] = useState(false);\n  const [draftCode, setDraftCode] = useState(code);\n  const [previewCode, setPreviewCode] = useState(code);\n\n  useEffect(() => {\n    setDraftCode(code);\n    setPreviewCode(code);\n  }, [code]);\n\n  const commitCodeChanges = () => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey);\n      if ($isMermaidNode(node)) {\n        node.setCode(draftCode);\n      }\n    });\n\n    setPreviewCode(draftCode);\n    setIsEditing(false);\n  };\n\n  const cancelEditing = () => {\n    setDraftCode(previewCode);\n    setIsEditing(false);\n  };\n\n  if (!isEditing) {\n    return (\n      <MermaidRenderer\n        key={previewCode}\n        code={previewCode}\n        isEditable={isEditable}\n        onRequestEdit={isEditable ? () => setIsEditing(true) : undefined}\n      />\n    );\n  }\n\n  return (\n    <Box borderWidth=\"1px\" borderColor=\"border.subtle\" borderRadius=\"md\" overflow=\"hidden\" width=\"100%\">\n      <Flex justifyContent=\"flex-end\" alignItems=\"center\" gap=\"xs\" paddingX=\"sm\" paddingY=\"xs\" bg=\"bg.muted\">\n        <Button size=\"xs\" variant=\"subtle\" onClick={cancelEditing}>\n          Cancel\n        </Button>\n        <Button size=\"xs\" onClick={commitCodeChanges}>\n          Preview\n        </Button>\n      </Flex>\n      <Box padding=\"sm\" bg=\"bg.muted\">\n        <Textarea\n          value={draftCode}\n          onChange={(event) => setDraftCode(event.target.value)}\n          minHeight=\"180px\"\n          resize=\"vertical\"\n          fontFamily=\"mono\"\n          fontSize=\"sm\"\n          spellCheck={false}\n        />\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MermaidComponent-CJCip-GB.js","names":["Box","Button","Flex","Textarea","useLexicalComposerContext","useLexicalEditable","$getNodeByKey","useEffect","useState","MermaidRenderer","$isMermaidNode","MermaidComponentProps","code","nodeKey","MermaidComponent","props","$","_c","editor","isEditable","isEditing","setIsEditing","draftCode","setDraftCode","previewCode","setPreviewCode","t0","t1","t2","update","node","setCode","commitCodeChanges","t3","cancelEditing","t4","undefined","t5","t6","t7","Symbol","for","event","target","value","t8","t9","_c","$isMermaidNode","MermaidComponent","$","c","props","editor","useLexicalComposerContext","isEditable","useLexicalEditable","isEditing","setIsEditing","useState","draftCode","setDraftCode","code","previewCode","setPreviewCode","t0","t1","useEffect","t2","nodeKey","node","$getNodeByKey","commitCodeChanges","t3","cancelEditing","t4","t5","MermaidRenderer","Button","t6","Flex","t7","event","t8","Box","Textarea","t9"],"sources":["../src/components/rich-text/shared/plugins/MermaidPlugin/MermaidComponent.tsx"],"sourcesContent":["import { Box, Button, Flex, Textarea } from \"@chakra-ui/react\";\nimport { useLexicalComposerContext } from \"@lexical/react/LexicalComposerContext\";\nimport { useLexicalEditable } from \"@lexical/react/useLexicalEditable\";\nimport { $getNodeByKey } from \"lexical\";\nimport { useEffect, useState } from \"react\";\nimport { MermaidRenderer } from \"@/components/mermaid-renderer\";\nimport { $isMermaidNode } from \"./MermaidNode\";\n\ninterface MermaidComponentProps {\n  code: string;\n  nodeKey: string;\n}\n\nexport default function MermaidComponent(props: MermaidComponentProps) {\n  const { code, nodeKey } = props;\n  const [editor] = useLexicalComposerContext();\n  const isEditable = useLexicalEditable();\n  const [isEditing, setIsEditing] = useState(false);\n  const [draftCode, setDraftCode] = useState(code);\n  const [previewCode, setPreviewCode] = useState(code);\n\n  useEffect(() => {\n    setDraftCode(code);\n    setPreviewCode(code);\n  }, [code]);\n\n  const commitCodeChanges = () => {\n    editor.update(() => {\n      const node = $getNodeByKey(nodeKey);\n      if ($isMermaidNode(node)) {\n        node.setCode(draftCode);\n      }\n    });\n\n    setPreviewCode(draftCode);\n    setIsEditing(false);\n  };\n\n  const cancelEditing = () => {\n    setDraftCode(previewCode);\n    setIsEditing(false);\n  };\n\n  if (!isEditing) {\n    return (\n      <MermaidRenderer\n        key={previewCode}\n        code={previewCode}\n        isEditable={isEditable}\n        onRequestEdit={isEditable ? () => setIsEditing(true) : undefined}\n      />\n    );\n  }\n\n  return (\n    <Box borderWidth=\"1px\" borderColor=\"border.subtle\" borderRadius=\"md\" overflow=\"hidden\" width=\"100%\">\n      <Flex justifyContent=\"flex-end\" alignItems=\"center\" gap=\"xs\" paddingX=\"sm\" paddingY=\"xs\" bg=\"bg.muted\">\n        <Button size=\"xs\" variant=\"subtle\" onClick={cancelEditing}>\n          Cancel\n        </Button>\n        <Button size=\"xs\" onClick={commitCodeChanges}>\n          Preview\n        </Button>\n      </Flex>\n      <Box padding=\"sm\" bg=\"bg.muted\">\n        <Textarea\n          value={draftCode}\n          onChange={(event) => setDraftCode(event.target.value)}\n          minHeight=\"180px\"\n          resize=\"vertical\"\n          fontFamily=\"mono\"\n          fontSize=\"sm\"\n          spellCheck={false}\n        />\n      </Box>\n    </Box>\n  );\n}\n"],"mappings":"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"}

package/dist/chat-ui.d.ts

@@ -1,5 +1,5 @@
 import { n as ResourceBadgeProps, r as ScrollArea$1 } from "./resource-badge-nOWPqxFU.js";
-import { d as ChatLinkCandidate, f as ChatLinkHandler, j as PromptCommand, k as PromptSelectionSnapshot, m as parseChatLink, p as ChatLinkProps } from "./index-5Lw7YMKy.js";
+import { d as ChatLinkCandidate, f as ChatLinkHandler, j as PromptCommand, k as PromptSelectionSnapshot, m as parseChatLink, p as ChatLinkProps } from "./index-Bc2BsdD1.js";
 import { HTMLChakraProps, IconButtonProps, RecipeVariantProps } from "@chakra-ui/react";
 import { StickToBottom } from "use-stick-to-bottom";
 import { ReactNode } from "react";