@liveblocks/react-ui 3.7.0-preview1 → 3.7.0

package/dist/overrides.cjs

@@ -9,6 +9,10 @@ var Duration = require('./primitives/Duration.cjs');
 var pluralize = require('./utils/pluralize.cjs');
 
 
+const MINIMUM_VISIBLE_DURATION = 3 * 1e3;
+function isDurationVisible(from, to) {
+  return Duration.getDuration(from, to ?? Date.now()) >= MINIMUM_VISIBLE_DURATION;
+}
 const defaultOverrides = {
   locale: "en",
   dir: "ltr",
@@ -132,13 +136,19 @@ const defaultOverrides = {
     children: "Reasoning\u2026"
   }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
     children: [
-      "Reasoned for",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(Duration.Duration, {
-        className: "lb-duration lb-ai-chat-message-reasoning-duration",
-        from: part.startedAt,
-        to: part.endedAt
-      })
+      "Reasoned",
+      isDurationVisible(part.startedAt, part.endedAt) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          " ",
+          "for",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(Duration.Duration, {
+            className: "lb-duration lb-ai-chat-message-reasoning-duration",
+            from: part.startedAt,
+            to: part.endedAt
+          })
+        ]
+      }) : null
     ]
   }),
   AI_CHAT_MESSAGE_RETRIEVAL: (isStreaming, part) => isStreaming ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
@@ -159,14 +169,18 @@ const defaultOverrides = {
         className: "lb-ai-chat-message-retrieval-query",
         children: part.query
       }),
-      " ",
-      "for",
-      " ",
-      /* @__PURE__ */ jsxRuntime.jsx(Duration.Duration, {
-        className: "lb-duration lb-ai-chat-message-retrieval-duration",
-        from: part.startedAt,
-        to: part.endedAt
-      })
+      isDurationVisible(part.startedAt, part.endedAt) ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [
+          " ",
+          "for",
+          " ",
+          /* @__PURE__ */ jsxRuntime.jsx(Duration.Duration, {
+            className: "lb-duration lb-ai-chat-message-retrieval-duration",
+            from: part.startedAt,
+            to: part.endedAt
+          })
+        ]
+      }) : null
     ]
   }),
   AI_CHAT_MESSAGES_ERROR: () => "There was an error while getting the messages.",

package/dist/overrides.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.cjs","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AiReasoningPart,\n  type AiRetrievalPart,\n  assertNever,\n} from \"@liveblocks/core\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport { Duration } from \"./primitives/Duration\";\nimport type { ComposerBodyMark, Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\n// TODO: Move overrides to single-argument-as-object with Liveblocks 4.0,\n//       it didn't make the cut for 3.0 but we should do it next time.\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n  EMOJI_PICKER_CHANGE_SKIN_TONE: string;\n  ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;\n  ATTACHMENT_ERROR: (error: Error) => string;\n  COPY_TO_CLIPBOARD: string;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_DELETE_ATTACHMENT: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_ATTACH_FILES: string;\n  COMPOSER_REMOVE_ATTACHMENT: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n  COMPOSER_TOGGLE_MARK: (mark: ComposerBodyMark) => string;\n}\n\nexport interface AiToolConfirmationOverrides {\n  AI_TOOL_CONFIRMATION_CONFIRM: string;\n  AI_TOOL_CONFIRMATION_CANCEL: string;\n}\n\nexport interface AiComposerOverrides {\n  AI_COMPOSER_PLACEHOLDER: string;\n  AI_COMPOSER_SEND: string;\n  AI_COMPOSER_ABORT: string;\n}\n\nexport interface AiChatMessageOverrides {\n  AI_CHAT_MESSAGE_DELETED: string;\n  AI_CHAT_MESSAGE_THINKING: ReactNode;\n  AI_CHAT_MESSAGE_REASONING: (\n    isStreaming: boolean,\n    part: AiReasoningPart\n  ) => ReactNode;\n  AI_CHAT_MESSAGE_RETRIEVAL: (\n    isStreaming: boolean,\n    part: AiRetrievalPart\n  ) => ReactNode;\n}\n\nexport interface AiChatOverrides {\n  AI_CHAT_MESSAGES_ERROR: (error: Error) => ReactNode;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_SUBSCRIBE: string;\n  THREAD_UNSUBSCRIBE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_SHOW_MORE_COMMENTS: (count: number) => string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_DELETE: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n  INBOX_NOTIFICATION_TEXT_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport interface HistoryVersionPreviewOverrides {\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => ReactNode;\n  HISTORY_VERSION_PREVIEW_RESTORE: string;\n  HISTORY_VERSION_PREVIEW_EMPTY: ReactNode;\n  HISTORY_VERSION_PREVIEW_ERROR: (error: Error) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides &\n  HistoryVersionPreviewOverrides &\n  AiComposerOverrides &\n  AiChatMessageOverrides &\n  AiChatOverrides &\n  AiToolConfirmationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  COPY_TO_CLIPBOARD: \"Copy\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  EMOJI_PICKER_CHANGE_SKIN_TONE: \"Change skin tone\",\n  ATTACHMENT_TOO_LARGE: (maxSize) =>\n    maxSize ? `The file is larger than ${maxSize}` : \"The file is too large\",\n  ATTACHMENT_ERROR: () => \"The file couldn’t be uploaded.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_ATTACH_FILES: \"Attach files\",\n  COMPOSER_REMOVE_ATTACHMENT: \"Remove attachment\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMPOSER_TOGGLE_MARK: (format) => {\n    switch (format) {\n      case \"bold\":\n        return \"Bold\";\n      case \"italic\":\n        return \"Italic\";\n      case \"strikethrough\":\n        return \"Strikethrough\";\n      case \"code\":\n        return \"Inline code\";\n      default:\n        return assertNever(format, \"Unexpected mark\");\n    }\n  },\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_DELETE_ATTACHMENT: \"Delete attachment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_SUBSCRIBE: \"Subscribe to thread\",\n  THREAD_UNSUBSCRIBE: \"Unsubscribe from thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_SHOW_MORE_COMMENTS: (count) =>\n    `Show ${count} more ${pluralize(count, \"reply\", \"replies\")}`,\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_DELETE: \"Delete notification\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => (\n    <>Edits from {list}</>\n  ),\n  HISTORY_VERSION_PREVIEW_RESTORE: \"Restore\",\n  HISTORY_VERSION_PREVIEW_EMPTY: \"No content.\",\n  HISTORY_VERSION_PREVIEW_ERROR: () =>\n    \"There was an error while getting this version.\",\n  AI_COMPOSER_PLACEHOLDER: \"Ask anything…\",\n  AI_COMPOSER_SEND: \"Send\",\n  AI_COMPOSER_ABORT: \"Abort response\",\n  AI_CHAT_MESSAGE_DELETED: \"This message has been deleted.\",\n  AI_CHAT_MESSAGE_THINKING: \"Thinking…\",\n  AI_CHAT_MESSAGE_REASONING: (isStreaming: boolean, part: AiReasoningPart) =>\n    isStreaming ? (\n      <>Reasoning…</>\n    ) : (\n      <>\n        Reasoned for{\" \"}\n        <Duration\n          className=\"lb-duration lb-ai-chat-message-reasoning-duration\"\n          from={part.startedAt}\n          to={part.endedAt}\n        />\n      </>\n    ),\n  AI_CHAT_MESSAGE_RETRIEVAL: (isStreaming: boolean, part: AiRetrievalPart) =>\n    isStreaming ? (\n      <>\n        Searching{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>\n        …\n      </>\n    ) : (\n      <>\n        Searched{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>{\" \"}\n        for{\" \"}\n        <Duration\n          className=\"lb-duration lb-ai-chat-message-retrieval-duration\"\n          from={part.startedAt}\n          to={part.endedAt}\n        />\n      </>\n    ),\n  AI_CHAT_MESSAGES_ERROR: () =>\n    \"There was an error while getting the messages.\",\n  AI_TOOL_CONFIRMATION_CONFIRM: \"Confirm\",\n  AI_TOOL_CONFIRMATION_CANCEL: \"Cancel\",\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAqJO;AAAoC;AACjC;AACH;AACM;AACG;AACK;AACW;AACuC;AAExB;AACZ;AACb;AAElB;AAC6B;AAEoB;AAC3B;AACC;AACF;AACA;AACK;AACN;AACP;AAEb;AAAgB;AAEZ;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAA4C;AAChD;AACF;AACgB;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACW;AACL;AAEpB;AACG;AAAA;AAAK;AAAe;AAAM;AAAc;AAAA;AAC3C;AAGwD;AAC1C;AACE;AACA;AACE;AACE;AACY;AAEyB;AAC9B;AACP;AACG;AACQ;AACN;AAKzB;AACG;AAAA;AAAK;AACE;AAAE;AAAA;AAAK;AAAA;AAAW;AAAE;AAAY;AAAA;AAC1C;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AAAE;AAAA;AAAY;AAAA;AAAK;AAEY;AACF;AAE7B;AACuB;AACP;AACC;AACM;AACC;AAGtB;AAAE;AAEF;AAAE;AAAA;AACa;AACZ;AACW;AACC;AACF;AACX;AAAA;AACF;AAIA;AAAE;AAAA;AACU;AACT;AAAe;AAA2C;AAAM;AAAO;AAAA;AAI1E;AAAE;AAAA;AACS;AACR;AAAe;AAA2C;AAAM;AAAQ;AAAI;AACzE;AACH;AACW;AACC;AACF;AACX;AAAA;AACF;AAGF;AAC4B;AAEhC;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAC/B;AAGP;;;;;"}
+{"version":3,"file":"overrides.cjs","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AiReasoningPart,\n  type AiRetrievalPart,\n  assertNever,\n} from \"@liveblocks/core\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport { Duration, getDuration } from \"./primitives/Duration\";\nimport type { ComposerBodyMark, Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\nconst MINIMUM_VISIBLE_DURATION = 3 * 1000;\n\n// TODO: Move overrides to single-argument-as-object with Liveblocks 4.0,\n//       it didn't make the cut for 3.0 but we should do it next time.\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n  EMOJI_PICKER_CHANGE_SKIN_TONE: string;\n  ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;\n  ATTACHMENT_ERROR: (error: Error) => string;\n  COPY_TO_CLIPBOARD: string;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_DELETE_ATTACHMENT: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_ATTACH_FILES: string;\n  COMPOSER_REMOVE_ATTACHMENT: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n  COMPOSER_TOGGLE_MARK: (mark: ComposerBodyMark) => string;\n}\n\nexport interface AiToolConfirmationOverrides {\n  AI_TOOL_CONFIRMATION_CONFIRM: string;\n  AI_TOOL_CONFIRMATION_CANCEL: string;\n}\n\nexport interface AiComposerOverrides {\n  AI_COMPOSER_PLACEHOLDER: string;\n  AI_COMPOSER_SEND: string;\n  AI_COMPOSER_ABORT: string;\n}\n\nexport interface AiChatMessageOverrides {\n  AI_CHAT_MESSAGE_DELETED: string;\n  AI_CHAT_MESSAGE_THINKING: ReactNode;\n  AI_CHAT_MESSAGE_REASONING: (\n    isStreaming: boolean,\n    part: AiReasoningPart\n  ) => ReactNode;\n  AI_CHAT_MESSAGE_RETRIEVAL: (\n    isStreaming: boolean,\n    part: AiRetrievalPart\n  ) => ReactNode;\n}\n\nexport interface AiChatOverrides {\n  AI_CHAT_MESSAGES_ERROR: (error: Error) => ReactNode;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_SUBSCRIBE: string;\n  THREAD_UNSUBSCRIBE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_SHOW_MORE_COMMENTS: (count: number) => string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_DELETE: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n  INBOX_NOTIFICATION_TEXT_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport interface HistoryVersionPreviewOverrides {\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => ReactNode;\n  HISTORY_VERSION_PREVIEW_RESTORE: string;\n  HISTORY_VERSION_PREVIEW_EMPTY: ReactNode;\n  HISTORY_VERSION_PREVIEW_ERROR: (error: Error) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides &\n  HistoryVersionPreviewOverrides &\n  AiComposerOverrides &\n  AiChatMessageOverrides &\n  AiChatOverrides &\n  AiToolConfirmationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nfunction isDurationVisible(\n  from: Date | string | number,\n  to: Date | string | number | undefined\n) {\n  return getDuration(from, to ?? Date.now()) >= MINIMUM_VISIBLE_DURATION;\n}\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  COPY_TO_CLIPBOARD: \"Copy\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  EMOJI_PICKER_CHANGE_SKIN_TONE: \"Change skin tone\",\n  ATTACHMENT_TOO_LARGE: (maxSize) =>\n    maxSize ? `The file is larger than ${maxSize}` : \"The file is too large\",\n  ATTACHMENT_ERROR: () => \"The file couldn’t be uploaded.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_ATTACH_FILES: \"Attach files\",\n  COMPOSER_REMOVE_ATTACHMENT: \"Remove attachment\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMPOSER_TOGGLE_MARK: (format) => {\n    switch (format) {\n      case \"bold\":\n        return \"Bold\";\n      case \"italic\":\n        return \"Italic\";\n      case \"strikethrough\":\n        return \"Strikethrough\";\n      case \"code\":\n        return \"Inline code\";\n      default:\n        return assertNever(format, \"Unexpected mark\");\n    }\n  },\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_DELETE_ATTACHMENT: \"Delete attachment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_SUBSCRIBE: \"Subscribe to thread\",\n  THREAD_UNSUBSCRIBE: \"Unsubscribe from thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_SHOW_MORE_COMMENTS: (count) =>\n    `Show ${count} more ${pluralize(count, \"reply\", \"replies\")}`,\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_DELETE: \"Delete notification\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => (\n    <>Edits from {list}</>\n  ),\n  HISTORY_VERSION_PREVIEW_RESTORE: \"Restore\",\n  HISTORY_VERSION_PREVIEW_EMPTY: \"No content.\",\n  HISTORY_VERSION_PREVIEW_ERROR: () =>\n    \"There was an error while getting this version.\",\n  AI_COMPOSER_PLACEHOLDER: \"Ask anything…\",\n  AI_COMPOSER_SEND: \"Send\",\n  AI_COMPOSER_ABORT: \"Abort response\",\n  AI_CHAT_MESSAGE_DELETED: \"This message has been deleted.\",\n  AI_CHAT_MESSAGE_THINKING: \"Thinking…\",\n  AI_CHAT_MESSAGE_REASONING: (isStreaming: boolean, part: AiReasoningPart) =>\n    isStreaming ? (\n      <>Reasoning…</>\n    ) : (\n      <>\n        Reasoned\n        {isDurationVisible(part.startedAt, part.endedAt) ? (\n          <>\n            {\" \"}\n            for{\" \"}\n            <Duration\n              className=\"lb-duration lb-ai-chat-message-reasoning-duration\"\n              from={part.startedAt}\n              to={part.endedAt}\n            />\n          </>\n        ) : null}\n      </>\n    ),\n  AI_CHAT_MESSAGE_RETRIEVAL: (isStreaming: boolean, part: AiRetrievalPart) =>\n    isStreaming ? (\n      <>\n        Searching{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>\n        …\n      </>\n    ) : (\n      <>\n        Searched{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>\n        {isDurationVisible(part.startedAt, part.endedAt) ? (\n          <>\n            {\" \"}\n            for{\" \"}\n            <Duration\n              className=\"lb-duration lb-ai-chat-message-retrieval-duration\"\n              from={part.startedAt}\n              to={part.endedAt}\n            />\n          </>\n        ) : null}\n      </>\n    ),\n  AI_CHAT_MESSAGES_ERROR: () =>\n    \"There was an error while getting the messages.\",\n  AI_TOOL_CONFIRMATION_CONFIRM: \"Confirm\",\n  AI_TOOL_CONFIRMATION_CANCEL: \"Cancel\",\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAeA;AAwIA;AAIE;AACF;AAEO;AAAoC;AACjC;AACH;AACM;AACG;AACK;AACW;AACuC;AAExB;AACZ;AACb;AAElB;AAC6B;AAEoB;AAC3B;AACC;AACF;AACA;AACK;AACN;AACP;AAEb;AAAgB;AAEZ;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAA4C;AAChD;AACF;AACgB;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACW;AACL;AAEpB;AACG;AAAA;AAAK;AAAe;AAAM;AAAc;AAAA;AAC3C;AAGwD;AAC1C;AACE;AACA;AACE;AACE;AACY;AAEyB;AAC9B;AACP;AACG;AACQ;AACN;AAKzB;AACG;AAAA;AAAK;AACE;AAAE;AAAA;AAAK;AAAA;AAAW;AAAE;AAAY;AAAA;AAC1C;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AAAE;AAAA;AAAY;AAAA;AAAK;AAEY;AACF;AAE7B;AACuB;AACP;AACC;AACM;AACC;AAGtB;AAAE;AAEF;AAAE;AAAA;AAGE;AACG;AAAA;AAAI;AACD;AACH;AACW;AACC;AACF;AACX;AAAA;AAEA;AAAA;AACN;AAIA;AAAE;AAAA;AACU;AACT;AAAe;AAA2C;AAAM;AAAO;AAAA;AAI1E;AAAE;AAAA;AACS;AACR;AAAe;AAA2C;AAAM;AAE/D;AACG;AAAA;AAAI;AACD;AACH;AACW;AACC;AACF;AACX;AAAA;AAEA;AAAA;AACN;AAGF;AAC4B;AAEhC;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAC/B;AAGP;;;;;"}

package/dist/overrides.js

@@ -3,10 +3,14 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { assertNever } from '@liveblocks/core';
 import { createContext, useContext, useMemo } from 'react';
 import { Emoji } from './components/internal/Emoji.js';
-import { Duration } from './primitives/Duration.js';
+import { getDuration, Duration } from './primitives/Duration.js';
 import { pluralize } from './utils/pluralize.js';
 
 
+const MINIMUM_VISIBLE_DURATION = 3 * 1e3;
+function isDurationVisible(from, to) {
+  return getDuration(from, to ?? Date.now()) >= MINIMUM_VISIBLE_DURATION;
+}
 const defaultOverrides = {
   locale: "en",
   dir: "ltr",
@@ -130,13 +134,19 @@ const defaultOverrides = {
     children: "Reasoning\u2026"
   }) : /* @__PURE__ */ jsxs(Fragment, {
     children: [
-      "Reasoned for",
-      " ",
-      /* @__PURE__ */ jsx(Duration, {
-        className: "lb-duration lb-ai-chat-message-reasoning-duration",
-        from: part.startedAt,
-        to: part.endedAt
-      })
+      "Reasoned",
+      isDurationVisible(part.startedAt, part.endedAt) ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          " ",
+          "for",
+          " ",
+          /* @__PURE__ */ jsx(Duration, {
+            className: "lb-duration lb-ai-chat-message-reasoning-duration",
+            from: part.startedAt,
+            to: part.endedAt
+          })
+        ]
+      }) : null
     ]
   }),
   AI_CHAT_MESSAGE_RETRIEVAL: (isStreaming, part) => isStreaming ? /* @__PURE__ */ jsxs(Fragment, {
@@ -157,14 +167,18 @@ const defaultOverrides = {
         className: "lb-ai-chat-message-retrieval-query",
         children: part.query
       }),
-      " ",
-      "for",
-      " ",
-      /* @__PURE__ */ jsx(Duration, {
-        className: "lb-duration lb-ai-chat-message-retrieval-duration",
-        from: part.startedAt,
-        to: part.endedAt
-      })
+      isDurationVisible(part.startedAt, part.endedAt) ? /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          " ",
+          "for",
+          " ",
+          /* @__PURE__ */ jsx(Duration, {
+            className: "lb-duration lb-ai-chat-message-retrieval-duration",
+            from: part.startedAt,
+            to: part.endedAt
+          })
+        ]
+      }) : null
     ]
   }),
   AI_CHAT_MESSAGES_ERROR: () => "There was an error while getting the messages.",

package/dist/overrides.js.map

@@ -1 +1 @@
-{"version":3,"file":"overrides.js","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AiReasoningPart,\n  type AiRetrievalPart,\n  assertNever,\n} from \"@liveblocks/core\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport { Duration } from \"./primitives/Duration\";\nimport type { ComposerBodyMark, Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\n// TODO: Move overrides to single-argument-as-object with Liveblocks 4.0,\n//       it didn't make the cut for 3.0 but we should do it next time.\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n  EMOJI_PICKER_CHANGE_SKIN_TONE: string;\n  ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;\n  ATTACHMENT_ERROR: (error: Error) => string;\n  COPY_TO_CLIPBOARD: string;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_DELETE_ATTACHMENT: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_ATTACH_FILES: string;\n  COMPOSER_REMOVE_ATTACHMENT: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n  COMPOSER_TOGGLE_MARK: (mark: ComposerBodyMark) => string;\n}\n\nexport interface AiToolConfirmationOverrides {\n  AI_TOOL_CONFIRMATION_CONFIRM: string;\n  AI_TOOL_CONFIRMATION_CANCEL: string;\n}\n\nexport interface AiComposerOverrides {\n  AI_COMPOSER_PLACEHOLDER: string;\n  AI_COMPOSER_SEND: string;\n  AI_COMPOSER_ABORT: string;\n}\n\nexport interface AiChatMessageOverrides {\n  AI_CHAT_MESSAGE_DELETED: string;\n  AI_CHAT_MESSAGE_THINKING: ReactNode;\n  AI_CHAT_MESSAGE_REASONING: (\n    isStreaming: boolean,\n    part: AiReasoningPart\n  ) => ReactNode;\n  AI_CHAT_MESSAGE_RETRIEVAL: (\n    isStreaming: boolean,\n    part: AiRetrievalPart\n  ) => ReactNode;\n}\n\nexport interface AiChatOverrides {\n  AI_CHAT_MESSAGES_ERROR: (error: Error) => ReactNode;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_SUBSCRIBE: string;\n  THREAD_UNSUBSCRIBE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_SHOW_MORE_COMMENTS: (count: number) => string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_DELETE: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n  INBOX_NOTIFICATION_TEXT_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport interface HistoryVersionPreviewOverrides {\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => ReactNode;\n  HISTORY_VERSION_PREVIEW_RESTORE: string;\n  HISTORY_VERSION_PREVIEW_EMPTY: ReactNode;\n  HISTORY_VERSION_PREVIEW_ERROR: (error: Error) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides &\n  HistoryVersionPreviewOverrides &\n  AiComposerOverrides &\n  AiChatMessageOverrides &\n  AiChatOverrides &\n  AiToolConfirmationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  COPY_TO_CLIPBOARD: \"Copy\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  EMOJI_PICKER_CHANGE_SKIN_TONE: \"Change skin tone\",\n  ATTACHMENT_TOO_LARGE: (maxSize) =>\n    maxSize ? `The file is larger than ${maxSize}` : \"The file is too large\",\n  ATTACHMENT_ERROR: () => \"The file couldn’t be uploaded.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_ATTACH_FILES: \"Attach files\",\n  COMPOSER_REMOVE_ATTACHMENT: \"Remove attachment\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMPOSER_TOGGLE_MARK: (format) => {\n    switch (format) {\n      case \"bold\":\n        return \"Bold\";\n      case \"italic\":\n        return \"Italic\";\n      case \"strikethrough\":\n        return \"Strikethrough\";\n      case \"code\":\n        return \"Inline code\";\n      default:\n        return assertNever(format, \"Unexpected mark\");\n    }\n  },\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_DELETE_ATTACHMENT: \"Delete attachment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_SUBSCRIBE: \"Subscribe to thread\",\n  THREAD_UNSUBSCRIBE: \"Unsubscribe from thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_SHOW_MORE_COMMENTS: (count) =>\n    `Show ${count} more ${pluralize(count, \"reply\", \"replies\")}`,\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_DELETE: \"Delete notification\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => (\n    <>Edits from {list}</>\n  ),\n  HISTORY_VERSION_PREVIEW_RESTORE: \"Restore\",\n  HISTORY_VERSION_PREVIEW_EMPTY: \"No content.\",\n  HISTORY_VERSION_PREVIEW_ERROR: () =>\n    \"There was an error while getting this version.\",\n  AI_COMPOSER_PLACEHOLDER: \"Ask anything…\",\n  AI_COMPOSER_SEND: \"Send\",\n  AI_COMPOSER_ABORT: \"Abort response\",\n  AI_CHAT_MESSAGE_DELETED: \"This message has been deleted.\",\n  AI_CHAT_MESSAGE_THINKING: \"Thinking…\",\n  AI_CHAT_MESSAGE_REASONING: (isStreaming: boolean, part: AiReasoningPart) =>\n    isStreaming ? (\n      <>Reasoning…</>\n    ) : (\n      <>\n        Reasoned for{\" \"}\n        <Duration\n          className=\"lb-duration lb-ai-chat-message-reasoning-duration\"\n          from={part.startedAt}\n          to={part.endedAt}\n        />\n      </>\n    ),\n  AI_CHAT_MESSAGE_RETRIEVAL: (isStreaming: boolean, part: AiRetrievalPart) =>\n    isStreaming ? (\n      <>\n        Searching{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>\n        …\n      </>\n    ) : (\n      <>\n        Searched{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>{\" \"}\n        for{\" \"}\n        <Duration\n          className=\"lb-duration lb-ai-chat-message-retrieval-duration\"\n          from={part.startedAt}\n          to={part.endedAt}\n        />\n      </>\n    ),\n  AI_CHAT_MESSAGES_ERROR: () =>\n    \"There was an error while getting the messages.\",\n  AI_TOOL_CONFIRMATION_CONFIRM: \"Confirm\",\n  AI_TOOL_CONFIRMATION_CANCEL: \"Cancel\",\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAqJO;AAAoC;AACjC;AACH;AACM;AACG;AACK;AACW;AACuC;AAExB;AACZ;AACb;AAElB;AAC6B;AAEoB;AAC3B;AACC;AACF;AACA;AACK;AACN;AACP;AAEb;AAAgB;AAEZ;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAA4C;AAChD;AACF;AACgB;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACW;AACL;AAEpB;AACG;AAAA;AAAK;AAAe;AAAM;AAAc;AAAA;AAC3C;AAGwD;AAC1C;AACE;AACA;AACE;AACE;AACY;AAEyB;AAC9B;AACP;AACG;AACQ;AACN;AAKzB;AACG;AAAA;AAAK;AACE;AAAE;AAAA;AAAK;AAAA;AAAW;AAAE;AAAY;AAAA;AAC1C;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AAAE;AAAA;AAAY;AAAA;AAAK;AAEY;AACF;AAE7B;AACuB;AACP;AACC;AACM;AACC;AAGtB;AAAE;AAEF;AAAE;AAAA;AACa;AACZ;AACW;AACC;AACF;AACX;AAAA;AACF;AAIA;AAAE;AAAA;AACU;AACT;AAAe;AAA2C;AAAM;AAAO;AAAA;AAI1E;AAAE;AAAA;AACS;AACR;AAAe;AAA2C;AAAM;AAAQ;AAAI;AACzE;AACH;AACW;AACC;AACF;AACX;AAAA;AACF;AAGF;AAC4B;AAEhC;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAC/B;AAGP;;"}
+{"version":3,"file":"overrides.js","sources":["../src/overrides.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type AiReasoningPart,\n  type AiRetrievalPart,\n  assertNever,\n} from \"@liveblocks/core\";\nimport type { PropsWithChildren, ReactNode } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\nimport { Emoji } from \"./components/internal/Emoji\";\nimport { Duration, getDuration } from \"./primitives/Duration\";\nimport type { ComposerBodyMark, Direction } from \"./types\";\nimport { pluralize } from \"./utils/pluralize\";\n\nconst MINIMUM_VISIBLE_DURATION = 3 * 1000;\n\n// TODO: Move overrides to single-argument-as-object with Liveblocks 4.0,\n//       it didn't make the cut for 3.0 but we should do it next time.\n\nexport interface LocalizationOverrides {\n  locale: string;\n  dir: Direction;\n}\n\nexport interface GlobalOverrides {\n  USER_SELF: string;\n  USER_UNKNOWN: string;\n  LIST_REMAINING: (count: number) => string;\n  LIST_REMAINING_USERS: (count: number) => string;\n  LIST_REMAINING_COMMENTS: (count: number) => string;\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: string;\n  EMOJI_PICKER_EMPTY: ReactNode;\n  EMOJI_PICKER_ERROR: (error: Error) => ReactNode;\n  EMOJI_PICKER_CHANGE_SKIN_TONE: string;\n  ATTACHMENT_TOO_LARGE: (maxSize?: string) => string;\n  ATTACHMENT_ERROR: (error: Error) => string;\n  COPY_TO_CLIPBOARD: string;\n}\n\nexport interface CommentOverrides {\n  COMMENT_EDITED: ReactNode;\n  COMMENT_DELETED: ReactNode;\n  COMMENT_MORE: string;\n  COMMENT_EDIT: string;\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: string;\n  COMMENT_EDIT_COMPOSER_CANCEL: string;\n  COMMENT_EDIT_COMPOSER_SAVE: string;\n  COMMENT_DELETE: string;\n  COMMENT_DELETE_ATTACHMENT: string;\n  COMMENT_ADD_REACTION: string;\n  COMMENT_REACTION_LIST: (\n    list: ReactNode,\n    emoji: string,\n    count: number\n  ) => ReactNode;\n  COMMENT_REACTION_DESCRIPTION: (emoji: string, count: number) => string;\n}\n\nexport interface ComposerOverrides {\n  COMPOSER_INSERT_MENTION: string;\n  COMPOSER_INSERT_EMOJI: string;\n  COMPOSER_ATTACH_FILES: string;\n  COMPOSER_REMOVE_ATTACHMENT: string;\n  COMPOSER_PLACEHOLDER: string;\n  COMPOSER_SEND: string;\n  COMPOSER_TOGGLE_MARK: (mark: ComposerBodyMark) => string;\n}\n\nexport interface AiToolConfirmationOverrides {\n  AI_TOOL_CONFIRMATION_CONFIRM: string;\n  AI_TOOL_CONFIRMATION_CANCEL: string;\n}\n\nexport interface AiComposerOverrides {\n  AI_COMPOSER_PLACEHOLDER: string;\n  AI_COMPOSER_SEND: string;\n  AI_COMPOSER_ABORT: string;\n}\n\nexport interface AiChatMessageOverrides {\n  AI_CHAT_MESSAGE_DELETED: string;\n  AI_CHAT_MESSAGE_THINKING: ReactNode;\n  AI_CHAT_MESSAGE_REASONING: (\n    isStreaming: boolean,\n    part: AiReasoningPart\n  ) => ReactNode;\n  AI_CHAT_MESSAGE_RETRIEVAL: (\n    isStreaming: boolean,\n    part: AiRetrievalPart\n  ) => ReactNode;\n}\n\nexport interface AiChatOverrides {\n  AI_CHAT_MESSAGES_ERROR: (error: Error) => ReactNode;\n}\n\nexport interface ThreadOverrides {\n  THREAD_RESOLVE: string;\n  THREAD_UNRESOLVE: string;\n  THREAD_SUBSCRIBE: string;\n  THREAD_UNSUBSCRIBE: string;\n  THREAD_NEW_INDICATOR: string;\n  THREAD_NEW_INDICATOR_DESCRIPTION: string;\n  THREAD_SHOW_MORE_COMMENTS: (count: number) => string;\n  THREAD_COMPOSER_PLACEHOLDER: string;\n  THREAD_COMPOSER_SEND: string;\n}\n\nexport interface InboxNotificationOverrides {\n  INBOX_NOTIFICATION_MORE: string;\n  INBOX_NOTIFICATION_MARK_AS_READ: string;\n  INBOX_NOTIFICATION_DELETE: string;\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode | undefined,\n    count: number\n  ) => ReactNode;\n  INBOX_NOTIFICATION_THREAD_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n  INBOX_NOTIFICATION_TEXT_MENTION: (\n    user: ReactNode,\n    room: ReactNode | undefined\n  ) => ReactNode;\n}\n\nexport interface HistoryVersionPreviewOverrides {\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => ReactNode;\n  HISTORY_VERSION_PREVIEW_RESTORE: string;\n  HISTORY_VERSION_PREVIEW_EMPTY: ReactNode;\n  HISTORY_VERSION_PREVIEW_ERROR: (error: Error) => ReactNode;\n}\n\nexport type Overrides = LocalizationOverrides &\n  GlobalOverrides &\n  ComposerOverrides &\n  CommentOverrides &\n  ThreadOverrides &\n  InboxNotificationOverrides &\n  HistoryVersionPreviewOverrides &\n  AiComposerOverrides &\n  AiChatMessageOverrides &\n  AiChatOverrides &\n  AiToolConfirmationOverrides;\n\ntype OverridesProviderProps = PropsWithChildren<{\n  overrides?: Partial<Overrides>;\n}>;\n\nfunction isDurationVisible(\n  from: Date | string | number,\n  to: Date | string | number | undefined\n) {\n  return getDuration(from, to ?? Date.now()) >= MINIMUM_VISIBLE_DURATION;\n}\n\nexport const defaultOverrides: Overrides = {\n  locale: \"en\",\n  dir: \"ltr\",\n  USER_SELF: \"you\",\n  USER_UNKNOWN: \"Anonymous\",\n  COPY_TO_CLIPBOARD: \"Copy\",\n  LIST_REMAINING: (count) => `${count} more`,\n  LIST_REMAINING_USERS: (count) => `${count} ${pluralize(count, \"other\")}`,\n  LIST_REMAINING_COMMENTS: (count) =>\n    `${count} more ${pluralize(count, \"comment\")}`,\n  EMOJI_PICKER_SEARCH_PLACEHOLDER: \"Search…\",\n  EMOJI_PICKER_EMPTY: \"No emoji found.\",\n  EMOJI_PICKER_ERROR: () =>\n    \"There was an error while getting the list of emoji.\",\n  EMOJI_PICKER_CHANGE_SKIN_TONE: \"Change skin tone\",\n  ATTACHMENT_TOO_LARGE: (maxSize) =>\n    maxSize ? `The file is larger than ${maxSize}` : \"The file is too large\",\n  ATTACHMENT_ERROR: () => \"The file couldn’t be uploaded.\",\n  COMPOSER_INSERT_MENTION: \"Mention someone\",\n  COMPOSER_INSERT_EMOJI: \"Add emoji\",\n  COMPOSER_ATTACH_FILES: \"Attach files\",\n  COMPOSER_REMOVE_ATTACHMENT: \"Remove attachment\",\n  COMPOSER_PLACEHOLDER: \"Write a comment…\",\n  COMPOSER_SEND: \"Send\",\n  COMPOSER_TOGGLE_MARK: (format) => {\n    switch (format) {\n      case \"bold\":\n        return \"Bold\";\n      case \"italic\":\n        return \"Italic\";\n      case \"strikethrough\":\n        return \"Strikethrough\";\n      case \"code\":\n        return \"Inline code\";\n      default:\n        return assertNever(format, \"Unexpected mark\");\n    }\n  },\n  COMMENT_EDITED: \"(edited)\",\n  COMMENT_DELETED: \"This comment has been deleted.\",\n  COMMENT_MORE: \"More\",\n  COMMENT_EDIT: \"Edit comment\",\n  COMMENT_EDIT_COMPOSER_PLACEHOLDER: \"Edit comment…\",\n  COMMENT_EDIT_COMPOSER_CANCEL: \"Cancel\",\n  COMMENT_EDIT_COMPOSER_SAVE: \"Save\",\n  COMMENT_DELETE: \"Delete comment\",\n  COMMENT_DELETE_ATTACHMENT: \"Delete attachment\",\n  COMMENT_ADD_REACTION: \"Add reaction\",\n  COMMENT_REACTION_LIST: (list, emoji) => (\n    <>\n      {list} reacted with <Emoji emoji={emoji} />\n    </>\n  ),\n  COMMENT_REACTION_DESCRIPTION: (emoji, count) =>\n    `${count} ${pluralize(count, \"reaction\")}, react with ${emoji}`,\n  THREAD_RESOLVE: \"Resolve thread\",\n  THREAD_UNRESOLVE: \"Re-open thread\",\n  THREAD_SUBSCRIBE: \"Subscribe to thread\",\n  THREAD_UNSUBSCRIBE: \"Unsubscribe from thread\",\n  THREAD_NEW_INDICATOR: \"New\",\n  THREAD_NEW_INDICATOR_DESCRIPTION: \"New comments\",\n  THREAD_SHOW_MORE_COMMENTS: (count) =>\n    `Show ${count} more ${pluralize(count, \"reply\", \"replies\")}`,\n  THREAD_COMPOSER_PLACEHOLDER: \"Reply to thread…\",\n  THREAD_COMPOSER_SEND: \"Reply\",\n  INBOX_NOTIFICATION_MORE: \"More\",\n  INBOX_NOTIFICATION_MARK_AS_READ: \"Mark as read\",\n  INBOX_NOTIFICATION_DELETE: \"Delete notification\",\n  INBOX_NOTIFICATION_THREAD_COMMENTS_LIST: (\n    list: ReactNode,\n    room: ReactNode\n  ) => (\n    <>\n      {list} commented\n      {room ? <> in {room}</> : <> in a thread</>}\n    </>\n  ),\n  INBOX_NOTIFICATION_THREAD_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  INBOX_NOTIFICATION_TEXT_MENTION: (user: ReactNode, room: ReactNode) => (\n    <>\n      {user} mentioned you{room ? <> in {room}</> : null}\n    </>\n  ),\n  HISTORY_VERSION_PREVIEW_AUTHORS_LIST: (list: ReactNode) => (\n    <>Edits from {list}</>\n  ),\n  HISTORY_VERSION_PREVIEW_RESTORE: \"Restore\",\n  HISTORY_VERSION_PREVIEW_EMPTY: \"No content.\",\n  HISTORY_VERSION_PREVIEW_ERROR: () =>\n    \"There was an error while getting this version.\",\n  AI_COMPOSER_PLACEHOLDER: \"Ask anything…\",\n  AI_COMPOSER_SEND: \"Send\",\n  AI_COMPOSER_ABORT: \"Abort response\",\n  AI_CHAT_MESSAGE_DELETED: \"This message has been deleted.\",\n  AI_CHAT_MESSAGE_THINKING: \"Thinking…\",\n  AI_CHAT_MESSAGE_REASONING: (isStreaming: boolean, part: AiReasoningPart) =>\n    isStreaming ? (\n      <>Reasoning…</>\n    ) : (\n      <>\n        Reasoned\n        {isDurationVisible(part.startedAt, part.endedAt) ? (\n          <>\n            {\" \"}\n            for{\" \"}\n            <Duration\n              className=\"lb-duration lb-ai-chat-message-reasoning-duration\"\n              from={part.startedAt}\n              to={part.endedAt}\n            />\n          </>\n        ) : null}\n      </>\n    ),\n  AI_CHAT_MESSAGE_RETRIEVAL: (isStreaming: boolean, part: AiRetrievalPart) =>\n    isStreaming ? (\n      <>\n        Searching{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>\n        …\n      </>\n    ) : (\n      <>\n        Searched{\" \"}\n        <span className=\"lb-ai-chat-message-retrieval-query\">{part.query}</span>\n        {isDurationVisible(part.startedAt, part.endedAt) ? (\n          <>\n            {\" \"}\n            for{\" \"}\n            <Duration\n              className=\"lb-duration lb-ai-chat-message-retrieval-duration\"\n              from={part.startedAt}\n              to={part.endedAt}\n            />\n          </>\n        ) : null}\n      </>\n    ),\n  AI_CHAT_MESSAGES_ERROR: () =>\n    \"There was an error while getting the messages.\",\n  AI_TOOL_CONFIRMATION_CONFIRM: \"Confirm\",\n  AI_TOOL_CONFIRMATION_CANCEL: \"Cancel\",\n};\n\nexport const OverridesContext = createContext<Overrides | undefined>(undefined);\n\nexport function useOverrides(overrides?: Partial<Overrides>): Overrides {\n  const contextOverrides = useContext(OverridesContext);\n\n  return useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...overrides,\n    }),\n    [contextOverrides, overrides]\n  );\n}\n\nexport function OverridesProvider({\n  children,\n  overrides: providerOverrides,\n}: OverridesProviderProps) {\n  const contextOverrides = useContext(OverridesContext);\n  const overrides = useMemo(\n    () => ({\n      ...defaultOverrides,\n      ...contextOverrides,\n      ...providerOverrides,\n    }),\n    [contextOverrides, providerOverrides]\n  );\n\n  return (\n    <OverridesContext.Provider value={overrides}>\n      {children}\n    </OverridesContext.Provider>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAeA;AAwIA;AAIE;AACF;AAEO;AAAoC;AACjC;AACH;AACM;AACG;AACK;AACW;AACuC;AAExB;AACZ;AACb;AAElB;AAC6B;AAEoB;AAC3B;AACC;AACF;AACA;AACK;AACN;AACP;AAEb;AAAgB;AAEZ;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAAO;AAEP;AAA4C;AAChD;AACF;AACgB;AACC;AACH;AACA;AACqB;AACL;AACF;AACZ;AACW;AACL;AAEpB;AACG;AAAA;AAAK;AAAe;AAAM;AAAc;AAAA;AAC3C;AAGwD;AAC1C;AACE;AACA;AACE;AACE;AACY;AAEyB;AAC9B;AACP;AACG;AACQ;AACN;AAKzB;AACG;AAAA;AAAK;AACE;AAAE;AAAA;AAAK;AAAA;AAAW;AAAE;AAAY;AAAA;AAC1C;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AACG;AAAA;AAAK;AAAsB;AAAE;AAAA;AAAK;AAAA;AAAW;AAAA;AAChD;AAGA;AAAE;AAAA;AAAY;AAAA;AAAK;AAEY;AACF;AAE7B;AACuB;AACP;AACC;AACM;AACC;AAGtB;AAAE;AAEF;AAAE;AAAA;AAGE;AACG;AAAA;AAAI;AACD;AACH;AACW;AACC;AACF;AACX;AAAA;AAEA;AAAA;AACN;AAIA;AAAE;AAAA;AACU;AACT;AAAe;AAA2C;AAAM;AAAO;AAAA;AAI1E;AAAE;AAAA;AACS;AACR;AAAe;AAA2C;AAAM;AAE/D;AACG;AAAA;AAAI;AACD;AACH;AACW;AACC;AACF;AACX;AAAA;AAEA;AAAA;AACN;AAGF;AAC4B;AAEhC;AAEa;AAEN;AACL;AAEA;AAAO;AACE;AACF;AACA;AACA;AACL;AAC4B;AAEhC;AAEO;AAA2B;AAChC;AAEF;AACE;AACA;AAAkB;AACT;AACF;AACA;AACA;AACL;AACoC;AAGtC;AACG;AAAiC;AAC/B;AAGP;;"}

package/dist/primitives/Duration.cjs

@@ -192,4 +192,5 @@ if (process.env.NODE_ENV !== "production") {
 
 exports.Duration = Duration;
 exports.formatIso8601Duration = formatIso8601Duration;
+exports.getDuration = getDuration;
 //# sourceMappingURL=Duration.cjs.map

package/dist/primitives/Duration.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Duration.cjs","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nfunction getDuration(from: Date | string | number, to: Date | string | number) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKA;AACE;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;;"}
+{"version":3,"file":"Duration.cjs","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nexport function getDuration(\n  from: Date | string | number,\n  to: Date | string | number\n) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKgB;AAId;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;;;"}

package/dist/primitives/Duration.js

@@ -188,5 +188,5 @@ if (process.env.NODE_ENV !== "production") {
   Duration.displayName = DURATION_NAME;
 }
 
-export { Duration, formatIso8601Duration };
+export { Duration, formatIso8601Duration, getDuration };
 //# sourceMappingURL=Duration.js.map

package/dist/primitives/Duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"Duration.js","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nfunction getDuration(from: Date | string | number, to: Date | string | number) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKA;AACE;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}
+{"version":3,"file":"Duration.js","sources":["../../src/primitives/Duration.tsx"],"sourcesContent":["\"use client\";\n\nimport type { Relax } from \"@liveblocks/core\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { forwardRef, type ReactNode, useMemo } from \"react\";\n\nimport type { ComponentPropsWithSlot } from \"../types\";\nimport { numberFormat } from \"../utils/intl\";\nimport { useInterval } from \"../utils/use-interval\";\nimport { useRerender } from \"../utils/use-rerender\";\n\nconst RENDER_INTERVAL = 0.5 * 1000; // 0.5 second\n\nconst DURATION_NAME = \"Duration\";\n\nexport type DurationProps = Omit<\n  ComponentPropsWithSlot<\"time\">,\n  \"children\" | \"title\"\n> &\n  Relax<\n    | {\n        /**\n         * The duration in milliseconds.\n         * If provided, `from` and `to` will be ignored.\n         */\n        duration: number;\n      }\n    | {\n        /**\n         * The date at which the duration starts.\n         * If provided, `duration` will be ignored.\n         * If provided without `to` it means that the duration is in progress,\n         * and the component will re-render at an interval, customizable with\n         * the `interval` prop.\n         */\n        from: Date | string | number;\n\n        /**\n         * The date at which the duration ends.\n         * If `from` is provided without `to`, `Date.now()` will be used.\n         */\n        to?: Date | string | number;\n      }\n  > & {\n    /**\n     * A function to format the displayed duration.\n     */\n    children?: (duration: number, locale?: string) => ReactNode;\n\n    /**\n     * The `title` attribute's value or a function to format it.\n     */\n    title?: string | ((duration: number, locale?: string) => string);\n\n    /**\n     * The interval in milliseconds at which the component will re-render if\n     * `from` is provided without `to`, meaning that the duration is in progress.\n     * Can be set to `false` to disable re-rendering.\n     */\n    interval?: number | false;\n\n    /**\n     * The locale used when formatting the duration.\n     */\n    locale?: string;\n  };\n\ninterface DurationParts {\n  weeks: number;\n  days: number;\n  hours: number;\n  minutes: number;\n  seconds: number;\n  milliseconds: number;\n}\n\nfunction getDurationParts(duration: number): DurationParts {\n  let remaining = Math.max(duration, 0);\n\n  const milliseconds = remaining % 1000;\n  remaining = Math.floor(remaining / 1000);\n\n  const seconds = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const minutes = remaining % 60;\n  remaining = Math.floor(remaining / 60);\n\n  const hours = remaining % 24;\n  remaining = Math.floor(remaining / 24);\n\n  const days = remaining % 7;\n  const weeks = Math.floor(remaining / 7);\n\n  return { weeks, days, hours, minutes, seconds, milliseconds };\n}\n\nconst durationPartsToNumberFormatOptions: Record<\n  keyof DurationParts,\n  Intl.NumberFormatOptions[\"unit\"]\n> = {\n  weeks: \"week\",\n  days: \"day\",\n  hours: \"hour\",\n  minutes: \"minute\",\n  seconds: \"second\",\n  milliseconds: \"millisecond\",\n};\n\n/**\n * Formats a duration in a short format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatShortDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"narrow\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"narrow\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration in a longer format.\n * TODO: Use `Intl.DurationFormat` when it's better supported.\n */\nfunction formatVerboseDuration(duration: number, locale?: string) {\n  let resolvedLocale: string;\n\n  if (locale) {\n    resolvedLocale = locale;\n  } else {\n    const formatter = numberFormat();\n\n    resolvedLocale = formatter.resolvedOptions().locale;\n  }\n\n  const parts = getDurationParts(duration);\n  const formattedParts: string[] = [];\n\n  for (const [unit, value] of Object.entries(parts) as [\n    keyof DurationParts,\n    number,\n  ][]) {\n    if (value === 0 || unit === \"milliseconds\") {\n      continue;\n    }\n\n    const formatter = numberFormat(resolvedLocale, {\n      style: \"unit\",\n      unit: durationPartsToNumberFormatOptions[unit],\n      unitDisplay: \"long\",\n    });\n\n    formattedParts.push(formatter.format(value));\n  }\n\n  if (!formattedParts.length) {\n    formattedParts.push(\n      numberFormat(resolvedLocale, {\n        style: \"unit\",\n        unit: \"second\",\n        unitDisplay: \"long\",\n      }).format(0)\n    );\n  }\n\n  return formattedParts.join(\" \");\n}\n\n/**\n * Formats a duration as ISO 8601.\n * TODO: Use `Temporal.Duration` when it's better supported.\n */\nexport function formatIso8601Duration(duration: number) {\n  const normalizedDuration = Math.max(duration, 0);\n\n  if (normalizedDuration === 0) {\n    return \"PT0S\";\n  }\n\n  const { weeks, days, hours, minutes, seconds, milliseconds } =\n    getDurationParts(normalizedDuration);\n\n  let isoDuration = \"P\";\n\n  // 1. Weeks\n  if (weeks > 0) {\n    isoDuration += `${weeks}W`;\n  }\n\n  // 2. Days\n  if (days > 0) {\n    isoDuration += `${days}D`;\n  }\n\n  if (hours > 0 || minutes > 0 || seconds > 0 || milliseconds > 0) {\n    isoDuration += \"T\";\n\n    // 3. Hours\n    if (hours > 0) {\n      isoDuration += `${hours}H`;\n    }\n\n    // 4. Minutes\n    if (minutes > 0) {\n      isoDuration += `${minutes}M`;\n    }\n\n    // 5. Seconds and milliseconds\n    if (seconds > 0 || milliseconds > 0) {\n      if (milliseconds > 0) {\n        isoDuration += `${seconds}.${milliseconds.toString().padStart(3, \"0\").replace(/0+$/, \"\")}S`;\n      } else {\n        isoDuration += `${seconds}S`;\n      }\n    }\n  }\n\n  return isoDuration;\n}\n\n/**\n * Converts a Date or Date-like value to a timestamp in milliseconds.\n */\nfunction getDateTime(date: Date | string | number) {\n  if (date instanceof Date) {\n    return date.getTime();\n  }\n\n  return new Date(date).getTime();\n}\n\n/**\n * Get a duration between two Date or Date-like values.\n */\nexport function getDuration(\n  from: Date | string | number,\n  to: Date | string | number\n) {\n  return getDateTime(to) - getDateTime(from);\n}\n\n/**\n * Displays a formatted duration, and automatically re-renders to if the\n * duration is in progress.\n *\n * @example\n * <Duration duration={3 * 60 * 1000} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} />\n *\n * @example\n * <Duration from={fiveHoursAgoDate} to={oneHourAgoDate} />\n */\nexport const Duration = forwardRef<HTMLTimeElement, DurationProps>(\n  (\n    {\n      duration,\n      from,\n      to,\n      locale,\n      dateTime,\n      title: renderTitle = formatVerboseDuration,\n      children: renderChildren = formatShortDuration,\n      interval = RENDER_INTERVAL,\n      asChild,\n      ...props\n    },\n    forwardedRef\n  ) => {\n    const Component = asChild ? Slot : \"time\";\n    const [rerender, key] = useRerender();\n    const resolvedDuration = useMemo(() => {\n      if (duration !== undefined) {\n        return duration;\n      }\n\n      if (from !== undefined) {\n        return getDuration(from, to ?? Date.now());\n      }\n\n      return 0;\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [duration, from, to, key]);\n    const normalizedDuration = useMemo(\n      () => formatIso8601Duration(resolvedDuration),\n      [resolvedDuration]\n    );\n    const title = useMemo(\n      () =>\n        typeof renderTitle === \"function\"\n          ? renderTitle(resolvedDuration, locale)\n          : renderTitle,\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [renderTitle, resolvedDuration, locale]\n    );\n    const children = useMemo(\n      () =>\n        typeof renderChildren === \"function\"\n          ? renderChildren(resolvedDuration, locale)\n          : renderChildren,\n\n      [renderChildren, resolvedDuration, locale]\n    );\n\n    // Only re-render if the duration is in progress.\n    useInterval(\n      rerender,\n      from !== undefined && to === undefined ? interval : false\n    );\n\n    return (\n      <Component\n        {...props}\n        ref={forwardedRef}\n        dateTime={dateTime ?? normalizedDuration}\n        title={title}\n      >\n        {children}\n      </Component>\n    );\n  }\n);\n\nif (process.env.NODE_ENV !== \"production\") {\n  Duration.displayName = DURATION_NAME;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWA;AAEA;AA+DA;AACE;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACA;AAEA;AACF;AAEA;AAGI;AACK;AACD;AACC;AACE;AACA;AAEX;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMA;AACE;AAEA;AACE;AAAiB;AAEjB;AAEA;AAA6C;AAG/C;AACA;AAEA;AAIE;AACE;AAAA;AAGF;AAA+C;AACtC;AACkC;AAC5B;AAGf;AAA2C;AAG7C;AACE;AAAe;AACgB;AACpB;AACD;AACO;AACJ;AACb;AAGF;AACF;AAMO;AACL;AAEA;AACE;AAAO;AAGT;AAGA;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAGpB;AACE;AAGA;AACE;AAAkB;AAIpB;AACE;AAAkB;AAIpB;AACE;AACE;AAAuF;AAEvF;AAAkB;AACpB;AACF;AAGF;AACF;AAKA;AACE;AACE;AAAoB;AAGtB;AACF;AAKgB;AAId;AACF;AAeO;AAAiB;AAEpB;AACE;AACA;AACA;AACA;AACA;AACqB;AACM;AAChB;AACX;AACG;AAIL;AACA;AACA;AACE;AACE;AAAO;AAGT;AACE;AAAyC;AAG3C;AAAO;AAGT;AAA2B;AACmB;AAC3B;AAEnB;AAAc;AAIN;AAEgC;AAExC;AAAiB;AAIT;AAEmC;AAI3C;AAAA;AACE;AACoD;AAGtD;AACG;AACK;AACC;AACiB;AACtB;AAEC;AACH;AAGN;AAEA;AACE;AACF;;"}

package/dist/version.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "3.7.0-preview1" === "string" && "3.7.0-preview1";
+const PKG_VERSION = typeof "3.7.0" === "string" && "3.7.0";
 const PKG_FORMAT = typeof "cjs" === "string" && "cjs";
 
 exports.PKG_FORMAT = PKG_FORMAT;

package/dist/version.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,gBAAA,KAAgB,QAAY,IAAA,iBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}
+{"version":3,"file":"version.cjs","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":";;AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,OAAA,KAAgB,QAAY,IAAA,QAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;;;"}

package/dist/version.js

@@ -1,5 +1,5 @@
 const PKG_NAME = "@liveblocks/react-ui";
-const PKG_VERSION = typeof "3.7.0-preview1" === "string" && "3.7.0-preview1";
+const PKG_VERSION = typeof "3.7.0" === "string" && "3.7.0";
 const PKG_FORMAT = typeof "esm" === "string" && "esm";
 
 export { PKG_FORMAT, PKG_NAME, PKG_VERSION };

package/dist/version.js.map

@@ -1 +1 @@
-{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,gBAAA,KAAgB,QAAY,IAAA,iBAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}
+{"version":3,"file":"version.js","sources":["../src/version.ts"],"sourcesContent":["declare const __VERSION__: string;\ndeclare const ROLLUP_FORMAT: string;\n\nexport const PKG_NAME = \"@liveblocks/react-ui\";\nexport const PKG_VERSION = typeof __VERSION__ === \"string\" && __VERSION__;\nexport const PKG_FORMAT = typeof ROLLUP_FORMAT === \"string\" && ROLLUP_FORMAT;\n"],"names":[],"mappings":"AAGO,MAAM,QAAW,GAAA,uBAAA;AACX,MAAA,WAAA,GAAc,OAAO,OAAA,KAAgB,QAAY,IAAA,QAAA;AACjD,MAAA,UAAA,GAAa,OAAO,KAAA,KAAkB,QAAY,IAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@liveblocks/react-ui",
-  "version": "3.7.0-preview1",
+  "version": "3.7.0",
   "description": "A set of React pre-built components for the Liveblocks products. Liveblocks is the all-in-one toolkit to build collaborative products like Figma, Notion, and more.",
   "license": "Apache-2.0",
   "type": "module",
@@ -76,9 +76,9 @@
   },
   "dependencies": {
     "@floating-ui/react-dom": "^2.1.2",
-    "@liveblocks/client": "3.7.0-preview1",
-    "@liveblocks/core": "3.7.0-preview1",
-    "@liveblocks/react": "3.7.0-preview1",
+    "@liveblocks/client": "3.7.0",
+    "@liveblocks/core": "3.7.0",
+    "@liveblocks/react": "3.7.0",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-popover": "^1.1.2",
     "@radix-ui/react-slot": "^1.1.0",

package/src/styles/index.css

@@ -2974,6 +2974,8 @@
 
 .lb-ai-tool-header-title {
   @include truncate;
+
+  user-select: auto;
 }
 
 .lb-ai-tool-header-status {