@dxos/react-ui-thread 0.4.4-main.6e43997 → 0.4.4-main.7b1e8ff

package/dist/lib/browser/index.mjs

@@ -24,7 +24,7 @@ import { ArrowBendLeftDown, Spinner } from "@phosphor-icons/react";
 import React, { forwardRef } from "react";
 import { useTranslation } from "@dxos/react-ui";
 import { hoverableControlItem, hoverableFocusedWithinControls, mx } from "@dxos/react-ui-theme";
-var threadLayout = "is-full place-self-start grid grid-cols-[3rem_1fr]";
+var threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
 var Thread = /* @__PURE__ */ forwardRef(({ current, children, classNames, ...props }, forwardedRef) => {
   return /* @__PURE__ */ React.createElement("div", {
     role: "group",

package/dist/lib/browser/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/translations.ts", "../../../src/Thread/Thread.tsx", "../../../src/Message/Message.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin name': 'Threads',\n        'thread title placeholder': 'New thread',\n        'thread title label': 'Title',\n        'delete thread label': 'Delete',\n        'create thread label': 'Create thread',\n        'message placeholder': 'Enter message...',\n        'comment placeholder': 'Enter comment...',\n        'settings standalone label': 'Enable standalone thread creation',\n        'anonymous label': 'Anonymous',\n        'enter to send message': 'Enter to add ⏎',\n      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ArrowBendLeftDown, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[3rem_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='grid place-items-end pie-3.5 fg-description'>\n          <ArrowBendLeftDown />\n        </div>\n        <p\n          role='heading'\n          data-testid='thread.heading'\n          {...props}\n          className={mx(\n            'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',\n            detached && 'line-through decoration-1',\n          )}\n          ref={forwardedRef}\n        >\n          {children}\n        </p>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx('col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description', classNames)}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { X } from '@phosphor-icons/react';\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, type FC, forwardRef } from 'react';\n\nimport { Avatar, Button, type ThemedClassName, useJdenticonHref, useTranslation } from '@dxos/react-ui';\nimport { TextEditor, type TextEditorProps, keymap, type EditorView, listener } from '@dxos/react-ui-editor';\nimport {\n  focusRing,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\nimport { safeParseJson } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nconst messageCell = 'plb-1 min-is-0';\n\nexport type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(\n  (\n    { authorImgSrc, authorStatus, authorId, authorName, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    const jdenticon = useJdenticonHref(authorId ?? '', avatarSize);\n\n    return (\n      <Avatar.Root status={authorStatus ?? 'inactive'} size={avatarSize}>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className={'flex flex-col items-center gap-2 ' + messageCell}>\n            <Avatar.Frame>\n              <Avatar.Fallback href={jdenticon} />\n              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n            </Avatar.Frame>\n            {continues && <div role='none' className='is-px grow surface-separator' />}\n          </div>\n          <div role='none' className={messageCell}>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageBlockProps<BlockValue> = {\n  block: MessageEntityBlock<BlockValue>;\n  authorId?: string;\n  onBlockDelete?: () => void;\n};\n\nconst DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {\n  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';\n  return (\n    <div\n      role='none'\n      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}\n    >\n      {block.data ? (\n        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>\n          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>\n        </pre>\n      ) : (\n        <p className={contentWidth}>{block.text ?? ''}</p>\n      )}\n      {onBlockDelete && (\n        <Button\n          variant='ghost'\n          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}\n          onClick={() => onBlockDelete()}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type MessageProps<BlockValue> = MessageEntity<BlockValue> & {\n  onDelete?: (messageId: string, blockIndex: number) => void;\n  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;\n};\n\nexport const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {\n  const { t, dtLocale } = useTranslation(translationKey);\n\n  const { authorName, onDelete, blocks, id, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n\n  const firstBlock = blocks[0];\n  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;\n\n  return (\n    <MessageMeta {...metaProps} id={id} continues>\n      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>\n        <Avatar.Label classNames={['truncate text-sm font-medium', !authorName && 'fg-description']}>\n          {authorName ?? t('anonymous label')}\n        </Avatar.Label>\n        <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>\n          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n        </time>\n      </p>\n      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>\n        {blocks.map((block, i) => (\n          <MessageBlockComponent\n            key={i}\n            block={block}\n            authorId={metaProps.authorId}\n            onBlockDelete={onDelete && (() => onDelete(id, i))}\n          />\n        ))}\n      </div>\n    </MessageMeta>\n  );\n};\n\nexport type MessageTextboxProps = {\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n  disabled?: boolean;\n} & Omit<MessageMetadata, 'id' | 'authorStatus'> &\n  TextEditorProps;\n\nexport const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(\n  (\n    { onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, extensions = [], ...editorProps },\n    forwardedRef,\n  ) => {\n    return (\n      <MessageMeta\n        {...{ id: editorProps.model.id, authorId, authorName, authorImgSrc }}\n        authorStatus='active'\n        continues={false}\n      >\n        <TextEditor\n          slots={{ root: { className: mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50') } }}\n          readonly={disabled}\n          extensions={[\n            ...extensions,\n            keymap.of([\n              {\n                key: 'Enter',\n                run: () => {\n                  if (onSend) {\n                    onSend();\n                    return true;\n                  } else {\n                    return false;\n                  }\n                },\n              },\n              {\n                key: 'Meta+Backspace',\n                run: () => {\n                  if (onClear) {\n                    onClear();\n                    return true;\n                  } else {\n                    return false;\n                  }\n                },\n              },\n            ]),\n            listener({\n              onFocus: (focused) => {\n                if (focused) {\n                  onEditorFocus?.();\n                }\n              },\n            }),\n          ]}\n          {...editorProps}\n          ref={forwardedRef}\n        />\n      </MessageMeta>\n    );\n  },\n);\n"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport const translationKey = 'thread';\n\nexport default [\n  {\n    'en-US': {\n      [translationKey]: {\n        'plugin name': 'Threads',\n        'thread title placeholder': 'New thread',\n        'thread title label': 'Title',\n        'delete thread label': 'Delete',\n        'create thread label': 'Create thread',\n        'message placeholder': 'Enter message...',\n        'comment placeholder': 'Enter comment...',\n        'settings standalone label': 'Enable standalone thread creation',\n        'anonymous label': 'Anonymous',\n        'enter to send message': 'Enter to add ⏎',\n      },\n    },\n  },\n];\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { ArrowBendLeftDown, Spinner } from '@phosphor-icons/react';\nimport React, { type ComponentProps, type ComponentPropsWithRef, forwardRef } from 'react';\n\nimport { type ThemedClassName, useTranslation } from '@dxos/react-ui';\nimport { hoverableControlItem, hoverableFocusedWithinControls, mx } from '@dxos/react-ui-theme';\n\nimport { translationKey } from '../translations';\nimport type { ThreadEntity } from '../types';\n\nexport type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };\n\nexport const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';\n\nexport const Thread = forwardRef<HTMLDivElement, ThreadProps>(\n  ({ current, children, classNames, ...props }, forwardedRef) => {\n    return (\n      <div\n        role='group'\n        data-testid='thread'\n        {...(current && { 'aria-current': typeof current === 'string' ? current : 'location' })}\n        {...props}\n        className={mx(\n          threadLayout,\n          hoverableFocusedWithinControls,\n          'bg-[var(--surface-bg)] border-[color:var(--surface-separator)] border-bs border-be plb-1.5 attention attention-within attention-current [--controls-opacity:0]',\n          classNames,\n        )}\n        ref={forwardedRef}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nexport type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & { detached?: boolean };\n\nexport const ThreadHeading = forwardRef<HTMLParagraphElement, ThreadHeadingProps>(\n  ({ classNames, children, detached, ...props }, forwardedRef) => {\n    return (\n      <>\n        <div role='none' className='grid place-items-end pie-3.5 fg-description'>\n          <ArrowBendLeftDown />\n        </div>\n        <p\n          role='heading'\n          data-testid='thread.heading'\n          {...props}\n          className={mx(\n            'fg-description font-medium truncate before:content-[open-quote] after:content-[close-quote]',\n            detached && 'line-through decoration-1',\n          )}\n          ref={forwardedRef}\n        >\n          {children}\n        </p>\n      </>\n    );\n  },\n);\n\nexport type ThreadFooterProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {\n  activity?: boolean;\n};\n\nexport const ThreadFooter = forwardRef<HTMLDivElement, ThreadFooterProps>(\n  ({ activity, classNames, children, ...props }, forwardedRef) => {\n    const { t } = useTranslation(translationKey);\n    return (\n      <div\n        {...props}\n        className={mx('col-start-2 grid grid-cols-[min-content_1fr_max-content] text-xs fg-description', classNames)}\n        ref={forwardedRef}\n      >\n        <Spinner\n          weight='bold'\n          data-visible={activity ? 'show' : 'hide'}\n          className='is-6 bs-4 invisible data-[visible=show]:visible animate-spin-slow'\n        />\n        <span className='truncate min-is-0' aria-live='polite'>\n          {activity ? children : null}\n        </span>\n        <span className={mx('text-end pie-1', hoverableControlItem)}>{t('enter to send message')}</span>\n      </div>\n    );\n  },\n);\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { X } from '@phosphor-icons/react';\nimport { formatDistanceToNow } from 'date-fns/formatDistanceToNow';\nimport React, { type ComponentPropsWithRef, type FC, forwardRef } from 'react';\n\nimport { Avatar, Button, type ThemedClassName, useJdenticonHref, useTranslation } from '@dxos/react-ui';\nimport { TextEditor, type TextEditorProps, keymap, type EditorView, listener } from '@dxos/react-ui-editor';\nimport {\n  focusRing,\n  hoverableControlItem,\n  hoverableControls,\n  hoverableFocusedWithinControls,\n  mx,\n} from '@dxos/react-ui-theme';\nimport { safeParseJson } from '@dxos/util';\n\nimport { translationKey } from '../translations';\nimport { type MessageEntity, type MessageEntityBlock, type MessageMetadata } from '../types';\n\nconst avatarSize = 7;\n\nconst messageCell = 'plb-1 min-is-0';\n\nexport type MessageMetaProps = ThemedClassName<ComponentPropsWithRef<'div'>> &\n  MessageMetadata &\n  Partial<{ continues: boolean }>;\n\nexport const MessageMeta = forwardRef<HTMLDivElement, MessageMetaProps>(\n  (\n    { authorImgSrc, authorStatus, authorId, authorName, continues = true, children, classNames, ...rootProps },\n    forwardedRef,\n  ) => {\n    const jdenticon = useJdenticonHref(authorId ?? '', avatarSize);\n\n    return (\n      <Avatar.Root status={authorStatus ?? 'inactive'} size={avatarSize}>\n        <div\n          role='none'\n          data-testid='thread.message'\n          {...rootProps}\n          className={mx('grid grid-cols-subgrid col-span-2', classNames)}\n          ref={forwardedRef}\n        >\n          <div role='none' className={'flex flex-col items-center gap-2 ' + messageCell}>\n            <Avatar.Frame>\n              <Avatar.Fallback href={jdenticon} />\n              {authorImgSrc && <Avatar.Image href={authorImgSrc} />}\n            </Avatar.Frame>\n            {continues && <div role='none' className='is-px grow surface-separator' />}\n          </div>\n          <div role='none' className={messageCell}>\n            {children}\n          </div>\n        </div>\n      </Avatar.Root>\n    );\n  },\n);\n\nexport type MessageBlockProps<BlockValue> = {\n  block: MessageEntityBlock<BlockValue>;\n  authorId?: string;\n  onBlockDelete?: () => void;\n};\n\nconst DefaultMessageBlock = ({ block, onBlockDelete }: MessageBlockProps<{ data?: any; text?: string }>) => {\n  const contentWidth = onBlockDelete ? 'col-span-2' : 'col-span-3';\n  return (\n    <div\n      role='none'\n      className={mx('grid grid-cols-subgrid col-span-3', hoverableControls, hoverableFocusedWithinControls)}\n    >\n      {block.data ? (\n        <pre className={mx('font-mono max-is-full overflow-x-auto', contentWidth)}>\n          <code>{JSON.stringify(safeParseJson(block.data), undefined, 2)}</code>\n        </pre>\n      ) : (\n        <p className={contentWidth}>{block.text ?? ''}</p>\n      )}\n      {onBlockDelete && (\n        <Button\n          variant='ghost'\n          classNames={['p-1.5 min-bs-0 mie-1 items-start transition-opacity', hoverableControlItem]}\n          onClick={() => onBlockDelete()}\n        >\n          <X />\n        </Button>\n      )}\n    </div>\n  );\n};\n\nexport type MessageProps<BlockValue> = MessageEntity<BlockValue> & {\n  onDelete?: (messageId: string, blockIndex: number) => void;\n  MessageBlockComponent?: FC<MessageBlockProps<BlockValue>>;\n};\n\nexport const Message = <BlockValue,>(props: MessageProps<BlockValue>) => {\n  const { t, dtLocale } = useTranslation(translationKey);\n\n  const { authorName, onDelete, blocks, id, MessageBlockComponent = DefaultMessageBlock, ...metaProps } = props;\n\n  const firstBlock = blocks[0];\n  const dt = firstBlock.timestamp ? new Date(firstBlock.timestamp) : undefined;\n\n  return (\n    <MessageMeta {...metaProps} id={id} continues>\n      <p className='grid grid-cols-[1fr_max-content] gap-2 pie-2'>\n        <Avatar.Label classNames={['truncate text-sm font-medium', !authorName && 'fg-description']}>\n          {authorName ?? t('anonymous label')}\n        </Avatar.Label>\n        <time className='fg-description text-xs pbs-0.5' dateTime={dt?.toISOString()}>\n          {dt ? formatDistanceToNow(dt, { locale: dtLocale, addSuffix: true }) : ''}\n        </time>\n      </p>\n      <div role='none' className='grid gap-y-1 grid-cols-[min-content_1fr_min-content]'>\n        {blocks.map((block, i) => (\n          <MessageBlockComponent\n            key={i}\n            block={block}\n            authorId={metaProps.authorId}\n            onBlockDelete={onDelete && (() => onDelete(id, i))}\n          />\n        ))}\n      </div>\n    </MessageMeta>\n  );\n};\n\nexport type MessageTextboxProps = {\n  onSend?: () => void;\n  onClear?: () => void;\n  onEditorFocus?: () => void;\n  disabled?: boolean;\n} & Omit<MessageMetadata, 'id' | 'authorStatus'> &\n  TextEditorProps;\n\nexport const MessageTextbox = forwardRef<EditorView, MessageTextboxProps>(\n  (\n    { onSend, onClear, onEditorFocus, authorId, authorName, authorImgSrc, disabled, extensions = [], ...editorProps },\n    forwardedRef,\n  ) => {\n    return (\n      <MessageMeta\n        {...{ id: editorProps.model.id, authorId, authorName, authorImgSrc }}\n        authorStatus='active'\n        continues={false}\n      >\n        <TextEditor\n          slots={{ root: { className: mx('plb-0.5 mie-1 rounded-sm', focusRing, disabled && 'opacity-50') } }}\n          readonly={disabled}\n          extensions={[\n            ...extensions,\n            keymap.of([\n              {\n                key: 'Enter',\n                run: () => {\n                  if (onSend) {\n                    onSend();\n                    return true;\n                  } else {\n                    return false;\n                  }\n                },\n              },\n              {\n                key: 'Meta+Backspace',\n                run: () => {\n                  if (onClear) {\n                    onClear();\n                    return true;\n                  } else {\n                    return false;\n                  }\n                },\n              },\n            ]),\n            listener({\n              onFocus: (focused) => {\n                if (focused) {\n                  onEditorFocus?.();\n                }\n              },\n            }),\n          ]}\n          {...editorProps}\n          ref={forwardedRef}\n        />\n      </MessageMeta>\n    );\n  },\n);\n"],
   "mappings": "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",
   "names": ["translationKey", "ArrowBendLeftDown", "Spinner", "React", "forwardRef", "useTranslation", "hoverableControlItem", "hoverableFocusedWithinControls", "mx", "threadLayout", "Thread", "forwardRef", "current", "children", "classNames", "props", "forwardedRef", "div", "role", "data-testid", "className", "mx", "hoverableFocusedWithinControls", "ref", "ThreadHeading", "detached", "ArrowBendLeftDown", "p", "ThreadFooter", "activity", "t", "useTranslation", "translationKey", "Spinner", "weight", "data-visible", "span", "aria-live", "hoverableControlItem", "X", "formatDistanceToNow", "React", "forwardRef", "Avatar", "Button", "useJdenticonHref", "useTranslation", "TextEditor", "keymap", "listener", "focusRing", "hoverableControlItem", "hoverableControls", "hoverableFocusedWithinControls", "mx", "safeParseJson", "avatarSize", "messageCell", "MessageMeta", "forwardRef", "authorImgSrc", "authorStatus", "authorId", "authorName", "continues", "children", "classNames", "rootProps", "forwardedRef", "jdenticon", "useJdenticonHref", "React", "Avatar", "Root", "status", "size", "div", "role", "data-testid", "className", "mx", "ref", "Frame", "Fallback", "href", "Image", "DefaultMessageBlock", "block", "onBlockDelete", "contentWidth", "hoverableControls", "hoverableFocusedWithinControls", "data", "pre", "code", "JSON", "stringify", "safeParseJson", "undefined", "p", "text", "Button", "variant", "hoverableControlItem", "onClick", "X", "Message", "props", "t", "dtLocale", "useTranslation", "translationKey", "onDelete", "blocks", "id", "MessageBlockComponent", "metaProps", "firstBlock", "dt", "timestamp", "Date", "Label", "time", "dateTime", "toISOString", "formatDistanceToNow", "locale", "addSuffix", "map", "i", "key", "MessageTextbox", "onSend", "onClear", "onEditorFocus", "disabled", "extensions", "editorProps", "model", "TextEditor", "slots", "root", "focusRing", "readonly", "keymap", "of", "run", "listener", "onFocus", "focused"]
 }

package/dist/lib/browser/meta.json

@@ -1 +1 @@
-{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2281,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9315,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":20112,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":474,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":1067,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":877,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16927},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Message","MessageMeta","MessageTextbox","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2475},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":5369},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8803}}}
+{"inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytes":2281,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytes":9343,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytes":472,"imports":[{"path":"packages/ui/react-ui-thread/src/Thread/Thread.tsx","kind":"import-statement","original":"./Thread"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytes":20112,"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true},{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"../translations"}],"format":"esm"},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytes":474,"imports":[{"path":"packages/ui/react-ui-thread/src/Message/Message.tsx","kind":"import-statement","original":"./Message"}],"format":"esm"},"packages/ui/react-ui-thread/src/types.ts":{"bytes":1067,"imports":[],"format":"esm"},"packages/ui/react-ui-thread/src/index.ts":{"bytes":877,"imports":[{"path":"packages/ui/react-ui-thread/src/translations.ts","kind":"import-statement","original":"./translations"},{"path":"packages/ui/react-ui-thread/src/Thread/index.ts","kind":"import-statement","original":"./Thread"},{"path":"packages/ui/react-ui-thread/src/Message/index.ts","kind":"import-statement","original":"./Message"},{"path":"packages/ui/react-ui-thread/src/types.ts","kind":"import-statement","original":"./types"}],"format":"esm"}},"outputs":{"packages/ui/react-ui-thread/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":16939},"packages/ui/react-ui-thread/dist/lib/browser/index.mjs":{"imports":[{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@phosphor-icons/react","kind":"import-statement","external":true},{"path":"date-fns/formatDistanceToNow","kind":"import-statement","external":true},{"path":"react","kind":"import-statement","external":true},{"path":"@dxos/react-ui","kind":"import-statement","external":true},{"path":"@dxos/react-ui-editor","kind":"import-statement","external":true},{"path":"@dxos/react-ui-theme","kind":"import-statement","external":true},{"path":"@dxos/util","kind":"import-statement","external":true}],"exports":["Message","MessageMeta","MessageTextbox","Thread","ThreadFooter","ThreadHeading","threadLayout","translations"],"entryPoint":"packages/ui/react-ui-thread/src/index.ts","inputs":{"packages/ui/react-ui-thread/src/translations.ts":{"bytesInOutput":609},"packages/ui/react-ui-thread/src/Thread/Thread.tsx":{"bytesInOutput":2487},"packages/ui/react-ui-thread/src/Thread/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/index.ts":{"bytesInOutput":0},"packages/ui/react-ui-thread/src/Message/Message.tsx":{"bytesInOutput":5369},"packages/ui/react-ui-thread/src/Message/index.ts":{"bytesInOutput":0}},"bytes":8815}}}

package/dist/types/src/Thread/Thread.d.ts

@@ -4,7 +4,7 @@ import type { ThreadEntity } from '../types';
 export type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> & ThreadEntity & {
     current?: boolean | ComponentProps<'div'>['aria-current'];
 };
-export declare const threadLayout = "is-full place-self-start grid grid-cols-[3rem_1fr]";
+export declare const threadLayout = "is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]";
 export declare const Thread: React.ForwardRefExoticComponent<Pick<ThreadProps, "current" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "children" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classNames" | keyof ThreadEntity> & React.RefAttributes<HTMLDivElement>>;
 export type ThreadHeadingProps = ThemedClassName<ComponentPropsWithRef<'div'>> & {
     detached?: boolean;

package/dist/types/src/Thread/Thread.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrE,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,YAAY,uDAAuD,CAAC;AAEjF,eAAO,MAAM,MAAM,knJAoBlB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExG,eAAO,MAAM,aAAa,2mJAsBzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,omJAqBxB,CAAC"}
+{"version":3,"file":"Thread.d.ts","sourceRoot":"","sources":["../../../../src/Thread/Thread.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,cAAc,EAAE,KAAK,qBAAqB,EAAc,MAAM,OAAO,CAAC;AAE3F,OAAO,EAAE,KAAK,eAAe,EAAkB,MAAM,gBAAgB,CAAC;AAItE,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAE7C,MAAM,MAAM,WAAW,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GACrE,YAAY,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAAE,CAAC;AAE/E,eAAO,MAAM,YAAY,mEAAmE,CAAC;AAE7F,eAAO,MAAM,MAAM,knJAoBlB,CAAC;AAEF,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAExG,eAAO,MAAM,aAAa,2mJAsBzB,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,GAAG;IAC9E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,YAAY,omJAqBxB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/react-ui-thread",
-  "version": "0.4.4-main.6e43997",
+  "version": "0.4.4-main.7b1e8ff",
   "description": "A set of components to use with threads, including comments and messages.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -18,11 +18,11 @@
   "dependencies": {
     "@radix-ui/react-primitive": "^1.0.2",
     "date-fns": "^3.3.1",
-    "@dxos/react-ui": "0.4.4-main.6e43997",
-    "@dxos/react-ui-editor": "0.4.4-main.6e43997",
-    "@dxos/react-ui-mosaic": "0.4.4-main.6e43997",
-    "@dxos/react-ui-theme": "0.4.4-main.6e43997",
-    "@dxos/util": "0.4.4-main.6e43997"
+    "@dxos/react-ui": "0.4.4-main.7b1e8ff",
+    "@dxos/react-ui-editor": "0.4.4-main.7b1e8ff",
+    "@dxos/react-ui-theme": "0.4.4-main.7b1e8ff",
+    "@dxos/util": "0.4.4-main.7b1e8ff",
+    "@dxos/react-ui-mosaic": "0.4.4-main.7b1e8ff"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -32,11 +32,11 @@
     "react-dom": "^18.2.0",
     "vite": "^5.0.12",
     "vite-plugin-turbosnap": "^1.0.2",
-    "@dxos/echo-schema": "0.4.4-main.6e43997",
-    "@dxos/keys": "0.4.4-main.6e43997",
-    "@dxos/log": "0.4.4-main.6e43997",
-    "@dxos/random": "0.4.4-main.6e43997",
-    "@dxos/storybook-utils": "0.4.4-main.6e43997"
+    "@dxos/echo-schema": "0.4.4-main.7b1e8ff",
+    "@dxos/keys": "0.4.4-main.7b1e8ff",
+    "@dxos/log": "0.4.4-main.7b1e8ff",
+    "@dxos/storybook-utils": "0.4.4-main.7b1e8ff",
+    "@dxos/random": "0.4.4-main.7b1e8ff"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",

package/src/Message/Message.stories.tsx

@@ -28,7 +28,7 @@ const Story = () => {
   });
 
   return (
-    <div className='grid grid-cols-[3rem_1fr]'>
+    <div className='grid grid-cols-[var(--rail-size)_1fr]'>
       <Message {...message} />
     </div>
   );

package/src/Thread/Thread.tsx

@@ -14,7 +14,7 @@ import type { ThreadEntity } from '../types';
 export type ThreadProps = ThemedClassName<ComponentPropsWithRef<'div'>> &
   ThreadEntity & { current?: boolean | ComponentProps<'div'>['aria-current'] };
 
-export const threadLayout = 'is-full place-self-start grid grid-cols-[3rem_1fr]';
+export const threadLayout = 'is-full place-self-start grid grid-cols-[var(--rail-size)_1fr]';
 
 export const Thread = forwardRef<HTMLDivElement, ThreadProps>(
   ({ current, children, classNames, ...props }, forwardedRef) => {