@cairntale/chimeling-react 1.0.0-alpha.1 → 1.0.0-alpha.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @cairntale/chimeling-react
 
+## 1.0.0-alpha.2
+
+### Minor Changes
+
+- 1cbe90a: Export utility functions and types including `getShowablePresence`, `formatActivityDuration`, and `iconImageUrl`
+- 1cbe90a: Add `ChimelingPlayground` component for interactive testing and development
+- 1cbe90a: Add Emotion CSS-in-JS integration to `ChimelingProvider` with `nonce` support
+
 ## 1.0.0-alpha.1
 
 ### Patch Changes

package/dist/components/index.d.ts

@@ -1,7 +1,7 @@
-import { ChimelingProvider } from "./provider.js";
-import { PresenceActivity, ShowablePresence } from "../lib/showable-presence.js";
+import { ChimelingProvider, ChimelingProviderProps } from "./provider.js";
 import { ChimelingRoot, ChimelingRootProps } from "./root.js";
 import { ChimelingTrigger, ChimelingTriggerProps } from "./trigger.js";
 import { ChimelingPopover, ChimelingPopoverProps } from "./popover.js";
 import { Chimeling } from "./chimeling.js";
-export { Chimeling, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps, type PresenceActivity, type ShowablePresence };
+import { ChimelingPlayground } from "./playground/playground.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, type ChimelingProviderProps, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps };

package/dist/components/index.js

@@ -4,4 +4,6 @@ import { ChimelingRoot } from "./root.js";
 import { ChimelingTrigger } from "./trigger.js";
 import { ChimelingPopover } from "./popover.js";
 import { Chimeling } from "./chimeling.js";
-export { Chimeling, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger };
+import { ChimelingPlayground } from "./playground/playground.js";
+import "./playground/index.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger };

package/dist/components/playground/index.js

@@ -0,0 +1,2 @@
+import { ChimelingPlayground } from "./playground.js";
+export { ChimelingPlayground };

package/dist/components/playground/panel.js

@@ -0,0 +1,173 @@
+"use client";
+import useTweaks from "./store.js";
+import { ClassNames, Global } from "@emotion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import dialkitStyles from "dialkit/styles.css?raw";
+import { ButtonGroup, Folder, SelectControl, Slider, TextControl, Toggle } from "dialkit";
+//#region src/components/playground/panel.tsx
+function PlaygroundPanel() {
+	const tweaks = useTweaks();
+	return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
+		className: cx("dialkit-root", css({
+			width: 320,
+			display: "flex",
+			flexDirection: "column",
+			gap: "var(--dial-row-gap)",
+			position: "fixed",
+			top: "calc(var(--dial-row-gap) * 1.5)",
+			right: "calc(var(--dial-row-gap) * 1.5)",
+			boxShadow: "var(--dial-shadow)",
+			background: "var(--dial-glass-bg)",
+			border: "1px solid var(--dial-border)",
+			backdropFilter: "blur(var(--dial-backdrop-blur))",
+			padding: "calc(var(--dial-row-gap) * 1.5)",
+			borderRadius: 14
+		})),
+		"data-theme": "system",
+		children: [
+			/* @__PURE__ */ jsx(Global, { styles: dialkitStyles }),
+			/* @__PURE__ */ jsx(SelectControl, {
+				label: "Mode",
+				value: tweaks.mode,
+				options: [{
+					label: "Live",
+					value: "live"
+				}, {
+					label: "Mock",
+					value: "mock"
+				}],
+				onChange: (v) => tweaks.set("mode", v)
+			}),
+			tweaks.mode === "live" && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(TextControl, {
+				label: "Base URL",
+				value: tweaks.baseUrl,
+				onChange: (v) => tweaks.set("baseUrl", v)
+			}), /* @__PURE__ */ jsx(TextControl, {
+				label: "User ID",
+				value: tweaks.userId,
+				onChange: (v) => tweaks.set("userId", v)
+			})] }),
+			tweaks.mode === "mock" && /* @__PURE__ */ jsxs(Folder, {
+				title: "Presence",
+				children: [/* @__PURE__ */ jsx(SelectControl, {
+					label: "Status",
+					value: tweaks.presence.status,
+					options: [
+						{
+							label: "Online",
+							value: "online"
+						},
+						{
+							label: "Idle",
+							value: "idle"
+						},
+						{
+							label: "Offline",
+							value: "offline"
+						}
+					],
+					onChange: (v) => tweaks.set("presence.status", v)
+				}), tweaks.presence.status !== "offline" && tweaks.presence.activity !== null && /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(TextControl, {
+						label: "Gerund",
+						value: tweaks.presence.activity.gerund,
+						onChange: (v) => tweaks.set("presence.activity.gerund", v)
+					}),
+					/* @__PURE__ */ jsx(TextControl, {
+						label: "App Name",
+						value: tweaks.presence.activity.appName,
+						onChange: (v) => tweaks.set("presence.activity.appName", v)
+					}),
+					/* @__PURE__ */ jsx(TextControl, {
+						label: "Icon Hash",
+						value: tweaks.presence.activity.iconHash,
+						onChange: (v) => tweaks.set("presence.activity.iconHash", v)
+					})
+				] })]
+			}),
+			/* @__PURE__ */ jsxs(Folder, {
+				title: "Behavior",
+				children: [
+					/* @__PURE__ */ jsx(SelectControl, {
+						label: "Side",
+						value: tweaks.behavior.side,
+						options: [
+							{
+								label: "Top",
+								value: "top"
+							},
+							{
+								label: "Bottom",
+								value: "bottom"
+							},
+							{
+								label: "Left",
+								value: "left"
+							},
+							{
+								label: "Right",
+								value: "right"
+							},
+							{
+								label: "Inline Start",
+								value: "inline-start"
+							},
+							{
+								label: "Inline End",
+								value: "inline-end"
+							}
+						],
+						onChange: (v) => tweaks.set("behavior.side", v)
+					}),
+					/* @__PURE__ */ jsx(SelectControl, {
+						label: "Align",
+						value: tweaks.behavior.align,
+						options: [
+							{
+								label: "Start",
+								value: "start"
+							},
+							{
+								label: "Center",
+								value: "center"
+							},
+							{
+								label: "End",
+								value: "end"
+							}
+						],
+						onChange: (v) => tweaks.set("behavior.align", v)
+					}),
+					/* @__PURE__ */ jsx(Toggle, {
+						label: "Open on Hover",
+						checked: tweaks.behavior.openOnHover,
+						onChange: (v) => tweaks.set("behavior.openOnHover", v)
+					}),
+					tweaks.behavior.openOnHover && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Slider, {
+						label: "Hover Open Delay",
+						min: 0,
+						max: 1500,
+						step: 100,
+						value: tweaks.behavior.hoverOpenDelay,
+						onChange: (v) => tweaks.set("behavior.hoverOpenDelay", v)
+					}), /* @__PURE__ */ jsx(Slider, {
+						label: "Hover Close Delay",
+						min: 0,
+						max: 1500,
+						step: 100,
+						value: tweaks.behavior.hoverCloseDelay,
+						onChange: (v) => tweaks.set("behavior.hoverCloseDelay", v)
+					})] })
+				]
+			}),
+			/* @__PURE__ */ jsx(ButtonGroup, { buttons: [{
+				label: "Reset",
+				onClick: tweaks.reset
+			}] })
+		]
+	}) });
+}
+//#endregion
+export { PlaygroundPanel };
+
+//# sourceMappingURL=panel.js.map

package/dist/components/playground/panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"panel.js","names":[],"sources":["../../../src/components/playground/panel.tsx"],"sourcesContent":["'use client'\n\nimport dialkitStyles from 'dialkit/styles.css?raw'\nimport { Global, ClassNames } from '@emotion/react'\nimport { TextControl, SelectControl, Folder, Toggle, Slider, ButtonGroup } from 'dialkit'\nimport useTweaks from './store'\n\nexport function PlaygroundPanel() {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            'dialkit-root',\n            css({\n              width: 320,\n              display: 'flex',\n              flexDirection: 'column',\n              gap: 'var(--dial-row-gap)',\n              position: 'fixed',\n              top: 'calc(var(--dial-row-gap) * 1.5)',\n              right: 'calc(var(--dial-row-gap) * 1.5)',\n              boxShadow: 'var(--dial-shadow)',\n              background: 'var(--dial-glass-bg)',\n              border: '1px solid var(--dial-border)',\n              backdropFilter: 'blur(var(--dial-backdrop-blur))',\n              padding: 'calc(var(--dial-row-gap) * 1.5)',\n              borderRadius: 14,\n            }),\n          )}\n          data-theme=\"system\"\n        >\n          <Global styles={dialkitStyles} />\n          <SelectControl\n            label=\"Mode\"\n            value={tweaks.mode}\n            options={[\n              {\n                label: 'Live',\n                value: 'live',\n              },\n              { label: 'Mock', value: 'mock' },\n            ]}\n            onChange={v => tweaks.set('mode', v)}\n          />\n          {tweaks.mode === 'live' && (\n            <>\n              <TextControl\n                label=\"Base URL\"\n                value={tweaks.baseUrl}\n                onChange={v => tweaks.set('baseUrl', v)}\n              />\n              <TextControl\n                label=\"User ID\"\n                value={tweaks.userId}\n                onChange={v => tweaks.set('userId', v)}\n              />\n            </>\n          )}\n          {tweaks.mode === 'mock' && (\n            <Folder title=\"Presence\">\n              <SelectControl\n                label=\"Status\"\n                value={tweaks.presence.status}\n                options={[\n                  {\n                    label: 'Online',\n                    value: 'online',\n                  },\n                  { label: 'Idle', value: 'idle' },\n                  { label: 'Offline', value: 'offline' },\n                ]}\n                onChange={v => tweaks.set('presence.status', v)}\n              />\n              {tweaks.presence.status !== 'offline' && tweaks.presence.activity !== null && (\n                <>\n                  <TextControl\n                    label=\"Gerund\"\n                    value={tweaks.presence.activity.gerund}\n                    onChange={v => tweaks.set('presence.activity.gerund', v)}\n                  />\n                  <TextControl\n                    label=\"App Name\"\n                    value={tweaks.presence.activity.appName}\n                    onChange={v => tweaks.set('presence.activity.appName', v)}\n                  />\n                  <TextControl\n                    label=\"Icon Hash\"\n                    value={tweaks.presence.activity.iconHash!}\n                    onChange={v => tweaks.set('presence.activity.iconHash', v)}\n                  />\n                </>\n              )}\n            </Folder>\n          )}\n          <Folder title=\"Behavior\">\n            <SelectControl\n              label=\"Side\"\n              value={tweaks.behavior.side}\n              options={[\n                { label: 'Top', value: 'top' },\n                { label: 'Bottom', value: 'bottom' },\n                { label: 'Left', value: 'left' },\n                { label: 'Right', value: 'right' },\n                { label: 'Inline Start', value: 'inline-start' },\n                { label: 'Inline End', value: 'inline-end' },\n              ]}\n              onChange={v => tweaks.set('behavior.side', v)}\n            />\n            <SelectControl\n              label=\"Align\"\n              value={tweaks.behavior.align}\n              options={[\n                { label: 'Start', value: 'start' },\n                { label: 'Center', value: 'center' },\n                { label: 'End', value: 'end' },\n              ]}\n              onChange={v => tweaks.set('behavior.align', v)}\n            />\n            <Toggle\n              label=\"Open on Hover\"\n              checked={tweaks.behavior.openOnHover}\n              onChange={v => tweaks.set('behavior.openOnHover', v)}\n            />\n            {tweaks.behavior.openOnHover && (\n              <>\n                <Slider\n                  label=\"Hover Open Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverOpenDelay}\n                  onChange={v => tweaks.set('behavior.hoverOpenDelay', v)}\n                />\n                <Slider\n                  label=\"Hover Close Delay\"\n                  min={0}\n                  max={1500}\n                  step={100}\n                  value={tweaks.behavior.hoverCloseDelay}\n                  onChange={v => tweaks.set('behavior.hoverCloseDelay', v)}\n                />\n              </>\n            )}\n          </Folder>\n          <ButtonGroup buttons={[{ label: 'Reset', onClick: tweaks.reset }]} />\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":"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"}

package/dist/components/playground/playground.d.ts

@@ -0,0 +1,8 @@
+//#region src/components/playground/playground.d.ts
+type ChimelingPlaygroundProps = {
+  className?: string;
+};
+declare function ChimelingPlayground({ className }: ChimelingPlaygroundProps): import("react").JSX.Element;
+//#endregion
+export { ChimelingPlayground, ChimelingPlaygroundProps };
+//# sourceMappingURL=playground.d.ts.map

package/dist/components/playground/playground.js

@@ -0,0 +1,35 @@
+"use client";
+import { ChimelingProvider } from "../provider.js";
+import { Chimeling } from "../chimeling.js";
+import useTweaks from "./store.js";
+import { PlaygroundPanel } from "./panel.js";
+import { ClassNames } from "@emotion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/playground/playground.tsx
+function ChimelingPlayground({ className }) {
+	const tweaks = useTweaks();
+	return /* @__PURE__ */ jsx(ClassNames, { children: ({ css, cx }) => /* @__PURE__ */ jsxs("div", {
+		className: cx(css({
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		}), className),
+		children: [/* @__PURE__ */ jsx(PlaygroundPanel, {}), /* @__PURE__ */ jsx(ChimelingProvider, {
+			baseUrl: tweaks.baseUrl,
+			children: /* @__PURE__ */ jsxs(Chimeling.Root, {
+				userId: tweaks.userId,
+				presence: tweaks.mode === "mock" ? tweaks.presence : void 0,
+				side: tweaks.behavior.side,
+				align: tweaks.behavior.align,
+				openOnHover: tweaks.behavior.openOnHover,
+				hoverOpenDelay: tweaks.behavior.hoverOpenDelay,
+				hoverCloseDelay: tweaks.behavior.hoverCloseDelay,
+				children: [/* @__PURE__ */ jsx(Chimeling.Trigger, {}), /* @__PURE__ */ jsx(Chimeling.Popover, {})]
+			})
+		})]
+	}) });
+}
+//#endregion
+export { ChimelingPlayground };
+
+//# sourceMappingURL=playground.js.map

package/dist/components/playground/playground.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"playground.js","names":[],"sources":["../../../src/components/playground/playground.tsx"],"sourcesContent":["'use client'\n\nimport { ClassNames } from '@emotion/react'\nimport { Chimeling } from '../chimeling'\nimport { ChimelingProvider } from '../provider'\nimport { PlaygroundPanel } from './panel'\nimport useTweaks from './store'\n\nexport type ChimelingPlaygroundProps = {\n  className?: string\n}\n\nexport function ChimelingPlayground({ className }: ChimelingPlaygroundProps) {\n  const tweaks = useTweaks()\n\n  return (\n    <ClassNames>\n      {({ css, cx }) => (\n        <div\n          className={cx(\n            css({\n              display: 'flex',\n              alignItems: 'center',\n              justifyContent: 'center',\n            }),\n            className,\n          )}\n        >\n          <PlaygroundPanel />\n          <ChimelingProvider baseUrl={tweaks.baseUrl}>\n            <Chimeling.Root\n              userId={tweaks.userId}\n              presence={tweaks.mode === 'mock' ? tweaks.presence : undefined}\n              side={tweaks.behavior.side}\n              align={tweaks.behavior.align}\n              openOnHover={tweaks.behavior.openOnHover}\n              hoverOpenDelay={tweaks.behavior.hoverOpenDelay}\n              hoverCloseDelay={tweaks.behavior.hoverCloseDelay}\n            >\n              <Chimeling.Trigger />\n              <Chimeling.Popover />\n            </Chimeling.Root>\n          </ChimelingProvider>\n        </div>\n      )}\n    </ClassNames>\n  )\n}\n"],"mappings":";;;;;;;;AAYA,SAAgB,oBAAoB,EAAE,aAAuC;CAC3E,MAAM,SAAS,UAAU;CAEzB,OACE,oBAAC,YAAD,EAAA,WACI,EAAE,KAAK,SACP,qBAAC,OAAD;EACE,WAAW,GACT,IAAI;GACF,SAAS;GACT,YAAY;GACZ,gBAAgB;EAClB,CAAC,GACD,SACF;EARF,UAAA,CAUE,oBAAC,iBAAD,CAAkB,CAAA,GAClB,oBAAC,mBAAD;GAAmB,SAAS,OAAO;GACjC,UAAA,qBAAC,UAAU,MAAX;IACE,QAAQ,OAAO;IACf,UAAU,OAAO,SAAS,SAAS,OAAO,WAAW,KAAA;IACrD,MAAM,OAAO,SAAS;IACtB,OAAO,OAAO,SAAS;IACvB,aAAa,OAAO,SAAS;IAC7B,gBAAgB,OAAO,SAAS;IAChC,iBAAiB,OAAO,SAAS;IAPnC,UAAA,CASE,oBAAC,UAAU,SAAX,CAAoB,CAAA,GACpB,oBAAC,UAAU,SAAX,CAAoB,CAAA,CACN;;EACC,CAAA,CAChB;CAEG,CAAA,EAAA,CAAA;AAEhB"}

package/dist/components/playground/store.js

@@ -0,0 +1,43 @@
+import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
+import { cloneDeep, get, set } from "es-toolkit/compat";
+//#region src/components/playground/store.ts
+const defaults = {
+	baseUrl: "https://chimeling.app",
+	userId: "user_3GA6hha0H3nrk9rTeCJ3pR6DcvY",
+	mode: "mock",
+	behavior: {
+		openOnHover: false,
+		hoverOpenDelay: 300,
+		hoverCloseDelay: 0,
+		side: "bottom",
+		align: "center"
+	},
+	presence: {
+		status: "online",
+		activity: {
+			gerund: "writing code",
+			appName: "Xcode",
+			iconHash: "9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d",
+			startedAt: /* @__PURE__ */ new Date()
+		}
+	}
+};
+const useTweaks = create()(persist((set$1, getState) => ({
+	...defaults,
+	get: (path) => get(getState(), path),
+	set: (path, value) => set$1((state) => {
+		const next = cloneDeep(state);
+		set(next, path, value);
+		return next;
+	}),
+	reset: () => set$1(defaults)
+}), {
+	name: "chimeling-playground",
+	storage: createJSONStorage(() => localStorage, { reviver: (key, value) => key === "startedAt" && typeof value === "string" ? new Date(value) : value }),
+	partialize: ({ get, set, reset, ...tweaks }) => tweaks
+}));
+//#endregion
+export { useTweaks as default };
+
+//# sourceMappingURL=store.js.map

package/dist/components/playground/store.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"store.js","names":["lodashGet","set","lodashCloneDeep"],"sources":["../../../src/components/playground/store.ts"],"sourcesContent":["import { create } from 'zustand'\nimport { persist, createJSONStorage } from 'zustand/middleware'\nimport { get as lodashGet, set as lodashSet, cloneDeep as lodashCloneDeep } from 'es-toolkit/compat'\nimport type { GetResolvedUserPresenceResponse } from '@cairntale/chimeling-js'\nimport type { Chimeling } from '../chimeling'\n\ninterface Tweaks {\n  baseUrl: string\n  userId: string\n  mode: 'live' | 'mock'\n  behavior: Required<\n    Pick<\n      React.ComponentProps<typeof Chimeling.Root>,\n      'openOnHover' | 'hoverOpenDelay' | 'hoverCloseDelay' | 'align' | 'side'\n    >\n  >\n  presence: GetResolvedUserPresenceResponse\n}\n\nconst NOW = new Date()\n\nconst defaults: Tweaks = {\n  baseUrl: 'https://chimeling.app',\n  userId: 'user_3GA6hha0H3nrk9rTeCJ3pR6DcvY',\n  mode: 'mock',\n  behavior: {\n    openOnHover: false,\n    hoverOpenDelay: 300,\n    hoverCloseDelay: 0,\n    side: 'bottom',\n    align: 'center',\n  },\n  presence: {\n    status: 'online',\n    activity: {\n      gerund: 'writing code',\n      appName: 'Xcode',\n      iconHash: '9e769c255c3afb5b435502f8294229c78e7514cf51051c16ddf368d72f757b1d',\n      startedAt: NOW,\n    },\n  },\n}\n\nconst useTweaks = create<\n  Tweaks & {\n    get: (path: string) => any\n    set: (path: string, value: any) => void\n    reset: () => void\n  }\n>()(\n  persist(\n    (set, getState) => ({\n      ...defaults,\n      get: (path: string): any => lodashGet(getState(), path),\n      set: (path: string, value: any) =>\n        set(state => {\n          const next = lodashCloneDeep(state)\n          lodashSet(next, path, value)\n          return next\n        }),\n      reset: () => set(defaults),\n    }),\n    {\n      name: 'chimeling-playground',\n      storage: createJSONStorage(() => localStorage, {\n        reviver: (key, value) =>\n          key === 'startedAt' && typeof value === 'string' ? new Date(value) : value, // TODO: a more robust date parsing\n      }),\n      partialize: ({ get, set, reset, ...tweaks }) => tweaks,\n    },\n  ),\n)\n\nexport default useTweaks\n"],"mappings":";;;;AAqBA,MAAM,WAAmB;CACvB,SAAS;CACT,QAAQ;CACR,MAAM;CACN,UAAU;EACR,aAAa;EACb,gBAAgB;EAChB,iBAAiB;EACjB,MAAM;EACN,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,UAAU;GACR,QAAQ;GACR,SAAS;GACT,UAAU;GACV,2BAAW,IAnBD,KAmBG;EACf;CACF;AACF;AAEA,MAAM,YAAY,OAMhB,CAAC,CACD,SACG,OAAK,cAAc;CAClB,GAAG;CACH,MAAM,SAAsBA,IAAU,SAAS,GAAG,IAAI;CACtD,MAAM,MAAc,UAClBC,OAAI,UAAS;EACX,MAAM,OAAOC,UAAgB,KAAK;EAClC,IAAU,MAAM,MAAM,KAAK;EAC3B,OAAO;CACT,CAAC;CACH,aAAaD,MAAI,QAAQ;AAC3B,IACA;CACE,MAAM;CACN,SAAS,wBAAwB,cAAc,EAC7C,UAAU,KAAK,UACb,QAAQ,eAAe,OAAO,UAAU,WAAW,IAAI,KAAK,KAAK,IAAI,MACzE,CAAC;CACD,aAAa,EAAE,KAAK,KAAK,OAAO,GAAG,aAAa;AAClD,CACF,CACF"}

package/dist/components/provider.d.ts

@@ -3,9 +3,10 @@ import { ReactNode } from "react";
 type ChimelingProviderProps = {
   baseUrl?: string;
   refreshInterval?: number;
-  children: ReactNode;
+  children?: ReactNode;
+  nonce?: string;
 };
-declare function ChimelingProvider({ baseUrl, refreshInterval, children }: ChimelingProviderProps): import("react").JSX.Element;
+declare function ChimelingProvider({ baseUrl, refreshInterval, children, nonce }: ChimelingProviderProps): import("react").JSX.Element;
 //#endregion
-export { ChimelingProvider };
+export { ChimelingProvider, ChimelingProviderProps };
 //# sourceMappingURL=provider.d.ts.map

package/dist/components/provider.js

@@ -3,17 +3,31 @@ import { DEFAULT_PRESENCE_REFRESH_INTERVAL } from "../lib/config.js";
 import { ChimelingContext } from "../lib/context.js";
 import { useMemo } from "react";
 import { createClient, createConfig } from "@cairntale/chimeling-js/client";
+import createCache from "@emotion/cache";
+import { CacheProvider } from "@emotion/react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/provider.tsx
-function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL, children }) {
+function ChimelingProvider({ baseUrl, refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL, children, nonce }) {
 	const client = useMemo(() => createClient(createConfig({ baseUrl: baseUrl ?? "https://chimeling.app" })), [baseUrl]);
 	const value = useMemo(() => ({
 		client,
 		refreshInterval
 	}), [client, refreshInterval]);
-	return /* @__PURE__ */ jsx(ChimelingContext.Provider, {
-		value,
-		children
+	const emotionCache = useMemo(() => {
+		const insertionPoint = typeof document !== "undefined" ? document.querySelector(`style#chl-style-insertion-point`) ?? void 0 : void 0;
+		return createCache({
+			key: "chl-internal",
+			prepend: !insertionPoint,
+			insertionPoint,
+			nonce
+		});
+	}, [nonce]);
+	return /* @__PURE__ */ jsx(CacheProvider, {
+		value: emotionCache,
+		children: /* @__PURE__ */ jsx(ChimelingContext.Provider, {
+			value,
+			children
+		})
 	});
 }
 //#endregion

package/dist/components/provider.js.map

@@ -1 +1 @@
-{"version":3,"file":"provider.js","names":[],"sources":["../../src/components/provider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ReactNode } from 'react'\nimport { createClient, createConfig } from '@cairntale/chimeling-js/client'\nimport { DEFAULT_PRESENCE_REFRESH_INTERVAL } from '../lib/config'\nimport { ChimelingContext } from '../lib/context'\n\ntype ChimelingProviderProps = {\n  baseUrl?: string\n  refreshInterval?: number\n  children: ReactNode\n}\n\nexport function ChimelingProvider({\n  baseUrl,\n  refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL,\n  children,\n}: ChimelingProviderProps) {\n  const client = useMemo(\n    () => createClient(createConfig({ baseUrl: baseUrl ?? 'https://chimeling.app' })),\n    [baseUrl],\n  )\n  const value = useMemo(() => ({ client, refreshInterval }), [client, refreshInterval])\n\n  return <ChimelingContext.Provider value={value}>{children}</ChimelingContext.Provider>\n}\n"],"mappings":";;;;;;;AAaA,SAAgB,kBAAkB,EAChC,SACA,kBAAkB,mCAClB,YACyB;CACzB,MAAM,SAAS,cACP,aAAa,aAAa,EAAE,SAAS,WAAW,wBAAwB,CAAC,CAAC,GAChF,CAAC,OAAO,CACV;CACA,MAAM,QAAQ,eAAe;EAAE;EAAQ;CAAgB,IAAI,CAAC,QAAQ,eAAe,CAAC;CAEpF,OAAO,oBAAC,iBAAiB,UAAlB;EAAkC;EAAQ;CAAoC,CAAA;AACvF"}
+{"version":3,"file":"provider.js","names":[],"sources":["../../src/components/provider.tsx"],"sourcesContent":["'use client'\n\nimport { useMemo, type ReactNode } from 'react'\nimport { createClient, createConfig } from '@cairntale/chimeling-js/client'\nimport { DEFAULT_PRESENCE_REFRESH_INTERVAL } from '../lib/config'\nimport { ChimelingContext } from '../lib/context'\nimport createCache from '@emotion/cache'\nimport { CacheProvider } from '@emotion/react'\n\nexport type ChimelingProviderProps = {\n  baseUrl?: string\n  refreshInterval?: number\n  children?: ReactNode\n  nonce?: string\n}\n\nexport function ChimelingProvider({\n  baseUrl,\n  refreshInterval = DEFAULT_PRESENCE_REFRESH_INTERVAL,\n  children,\n  nonce,\n}: ChimelingProviderProps) {\n  const client = useMemo(\n    () => createClient(createConfig({ baseUrl: baseUrl ?? 'https://chimeling.app' })),\n    [baseUrl],\n  )\n  const value = useMemo(() => ({ client, refreshInterval }), [client, refreshInterval])\n\n  const emotionCache = useMemo(() => {\n    const insertionPoint =\n      typeof document !== 'undefined'\n        ? (document.querySelector<HTMLElement>(`style#chl-style-insertion-point`) ?? undefined)\n        : undefined\n\n    return createCache({\n      key: 'chl-internal',\n      prepend: !insertionPoint,\n      insertionPoint,\n      nonce,\n    })\n  }, [nonce])\n\n  return (\n    <CacheProvider value={emotionCache}>\n      <ChimelingContext.Provider value={value}>{children}</ChimelingContext.Provider>\n    </CacheProvider>\n  )\n}\n"],"mappings":";;;;;;;;;AAgBA,SAAgB,kBAAkB,EAChC,SACA,kBAAkB,mCAClB,UACA,SACyB;CACzB,MAAM,SAAS,cACP,aAAa,aAAa,EAAE,SAAS,WAAW,wBAAwB,CAAC,CAAC,GAChF,CAAC,OAAO,CACV;CACA,MAAM,QAAQ,eAAe;EAAE;EAAQ;CAAgB,IAAI,CAAC,QAAQ,eAAe,CAAC;CAEpF,MAAM,eAAe,cAAc;EACjC,MAAM,iBACJ,OAAO,aAAa,cACf,SAAS,cAA2B,iCAAiC,KAAK,KAAA,IAC3E,KAAA;EAEN,OAAO,YAAY;GACjB,KAAK;GACL,SAAS,CAAC;GACV;GACA;EACF,CAAC;CACH,GAAG,CAAC,KAAK,CAAC;CAEV,OACE,oBAAC,eAAD;EAAe,OAAO;EACpB,UAAA,oBAAC,iBAAiB,UAAlB;GAAkC;GAAQ;EAAoC,CAAA;CACjE,CAAA;AAEnB"}

package/dist/hooks/use-resolved-user-presence.js

@@ -1,13 +1,18 @@
 "use client";
+import { PACKAGE_NAME } from "../lib/config.js";
 import { useChimelingContext } from "../lib/context.js";
-import { resolvedUserPresenceKey } from "../lib/presence-key.js";
 import useSWR from "swr";
 import { getResolvedUserPresence } from "@cairntale/chimeling-js";
 //#region src/hooks/use-resolved-user-presence.ts
 function useResolvedUserPresence(userId, options) {
 	const { client, refreshInterval } = useChimelingContext();
 	const baseUrl = client.getConfig().baseUrl ?? "";
-	return useSWR(userId ? resolvedUserPresenceKey(userId, baseUrl) : null, async ([, , , id]) => {
+	return useSWR(userId ? [
+		PACKAGE_NAME,
+		"resolved-user-presence",
+		baseUrl,
+		userId
+	] : null, async ([, , , id]) => {
 		const { data } = await getResolvedUserPresence({ userId: id }, {
 			client,
 			throwOnError: true

package/dist/hooks/use-resolved-user-presence.js.map

@@ -1 +1 @@
-{"version":3,"file":"use-resolved-user-presence.js","names":[],"sources":["../../src/hooks/use-resolved-user-presence.ts"],"sourcesContent":["'use client'\n\nimport useSWR from 'swr'\nimport { getResolvedUserPresence } from '@cairntale/chimeling-js'\nimport { useChimelingContext } from '../lib/context'\nimport { resolvedUserPresenceKey } from '../lib/presence-key'\n\nexport function useResolvedUserPresence(\n  userId: string,\n  options?: {\n    refreshInterval?: number\n  },\n) {\n  const { client, refreshInterval } = useChimelingContext()\n  const baseUrl = client.getConfig().baseUrl ?? ''\n\n  return useSWR(\n    userId ? resolvedUserPresenceKey(userId, baseUrl) : null,\n    async ([, , , id]) => {\n      const { data } = await getResolvedUserPresence({ userId: id }, { client, throwOnError: true })\n      return data\n    },\n    {\n      refreshInterval: options?.refreshInterval ?? refreshInterval,\n    },\n  )\n}\n"],"mappings":";;;;;;AAOA,SAAgB,wBACd,QACA,SAGA;CACA,MAAM,EAAE,QAAQ,oBAAoB,oBAAoB;CACxD,MAAM,UAAU,OAAO,UAAU,CAAC,CAAC,WAAW;CAE9C,OAAO,OACL,SAAS,wBAAwB,QAAQ,OAAO,IAAI,MACpD,OAAO,OAAO,QAAQ;EACpB,MAAM,EAAE,SAAS,MAAM,wBAAwB,EAAE,QAAQ,GAAG,GAAG;GAAE;GAAQ,cAAc;EAAK,CAAC;EAC7F,OAAO;CACT,GACA,EACE,iBAAiB,SAAS,mBAAmB,gBAC/C,CACF;AACF"}
+{"version":3,"file":"use-resolved-user-presence.js","names":[],"sources":["../../src/hooks/use-resolved-user-presence.ts"],"sourcesContent":["'use client'\n\nimport useSWR from 'swr'\nimport { getResolvedUserPresence } from '@cairntale/chimeling-js'\nimport { useChimelingContext } from '../lib/context'\nimport { PACKAGE_NAME } from '../lib/config'\n\nexport function useResolvedUserPresence(\n  userId: string,\n  options?: {\n    refreshInterval?: number\n  },\n) {\n  const { client, refreshInterval } = useChimelingContext()\n  const baseUrl = client.getConfig().baseUrl ?? ''\n\n  return useSWR(\n    userId ? [PACKAGE_NAME, 'resolved-user-presence', baseUrl, userId] : null,\n    async ([, , , id]) => {\n      const { data } = await getResolvedUserPresence({ userId: id }, { client, throwOnError: true })\n      return data\n    },\n    {\n      refreshInterval: options?.refreshInterval ?? refreshInterval,\n    },\n  )\n}\n"],"mappings":";;;;;;AAOA,SAAgB,wBACd,QACA,SAGA;CACA,MAAM,EAAE,QAAQ,oBAAoB,oBAAoB;CACxD,MAAM,UAAU,OAAO,UAAU,CAAC,CAAC,WAAW;CAE9C,OAAO,OACL,SAAS;EAAC;EAAc;EAA0B;EAAS;CAAM,IAAI,MACrE,OAAO,OAAO,QAAQ;EACpB,MAAM,EAAE,SAAS,MAAM,wBAAwB,EAAE,QAAQ,GAAG,GAAG;GAAE;GAAQ,cAAc;EAAK,CAAC;EAC7F,OAAO;CACT,GACA,EACE,iBAAiB,SAAS,mBAAmB,gBAC/C,CACF;AACF"}

package/dist/index.d.ts

@@ -1,11 +1,15 @@
-import { ChimelingProvider } from "./components/provider.js";
-import { PresenceActivity, ShowablePresence } from "./lib/showable-presence.js";
+import { ChimelingProvider, ChimelingProviderProps } from "./components/provider.js";
+import { PresenceActivity, ShowablePresence, getShowablePresence } from "./lib/showable-presence.js";
 import { ChimelingRoot, ChimelingRootProps } from "./components/root.js";
 import { ChimelingTrigger, ChimelingTriggerProps } from "./components/trigger.js";
 import { ChimelingPopover, ChimelingPopoverProps } from "./components/popover.js";
 import { Chimeling } from "./components/chimeling.js";
+import { ChimelingPlayground } from "./components/playground/playground.js";
 import "./components/index.js";
 import { useChimelingClient } from "./hooks/use-client.js";
 import { useResolvedUserPresence } from "./hooks/use-resolved-user-presence.js";
 import "./hooks/index.js";
-export { Chimeling, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps, type PresenceActivity, type ShowablePresence, useChimelingClient, useResolvedUserPresence };
+import { formatActivityDuration } from "./lib/format-activity-duration.js";
+import { iconImageUrl } from "./lib/icon-url.js";
+import "./lib/index.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, type ChimelingPopoverProps, ChimelingProvider, type ChimelingProviderProps, ChimelingRoot, type ChimelingRootProps, ChimelingTrigger, type ChimelingTriggerProps, type PresenceActivity, type ShowablePresence, formatActivityDuration, getShowablePresence, iconImageUrl, useChimelingClient, useResolvedUserPresence };

package/dist/index.js

@@ -1,11 +1,16 @@
 "use client";
 import { ChimelingProvider } from "./components/provider.js";
 import { useResolvedUserPresence } from "./hooks/use-resolved-user-presence.js";
+import { getShowablePresence } from "./lib/showable-presence.js";
 import { ChimelingRoot } from "./components/root.js";
 import { ChimelingTrigger } from "./components/trigger.js";
+import { formatActivityDuration } from "./lib/format-activity-duration.js";
+import { iconImageUrl } from "./lib/icon-url.js";
 import { ChimelingPopover } from "./components/popover.js";
 import { Chimeling } from "./components/chimeling.js";
+import { ChimelingPlayground } from "./components/playground/playground.js";
 import "./components/index.js";
 import { useChimelingClient } from "./hooks/use-client.js";
 import "./hooks/index.js";
-export { Chimeling, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger, useChimelingClient, useResolvedUserPresence };
+import "./lib/index.js";
+export { Chimeling, ChimelingPlayground, ChimelingPopover, ChimelingProvider, ChimelingRoot, ChimelingTrigger, formatActivityDuration, getShowablePresence, iconImageUrl, useChimelingClient, useResolvedUserPresence };

package/dist/lib/config.js.map

@@ -1 +1 @@
-{"version":3,"file":"config.js","names":["packageJson.name"],"sources":["../../src/lib/config.ts"],"sourcesContent":["import packageJson from '../../package.json' with { type: 'json' }\n\nexport const PACKAGE_NAME = packageJson.name\n\nexport const DEFAULT_PRESENCE_REFRESH_INTERVAL = 5_000\n\nexport function packageErrorMessage(message: string): string {\n  return `${PACKAGE_NAME}: ${message}`\n}\n"],"mappings":";;AAEA,MAAa,eAAeA;AAE5B,MAAa,oCAAoC;AAEjD,SAAgB,oBAAoB,SAAyB;CAC3D,OAAO,GAAG,aAAa,IAAI;AAC7B"}
+{"version":3,"file":"config.js","names":["packageJson.name"],"sources":["../../src/lib/config.ts"],"sourcesContent":["import packageJson from '../../package.json' with { type: 'json' }\nexport const PACKAGE_NAME = packageJson.name\n\nexport const DEFAULT_PRESENCE_REFRESH_INTERVAL = 5000\n\nexport function packageErrorMessage(message: string): string {\n  return `${PACKAGE_NAME}: ${message}`\n}\n"],"mappings":";;AACA,MAAa,eAAeA;AAE5B,MAAa,oCAAoC;AAEjD,SAAgB,oBAAoB,SAAyB;CAC3D,OAAO,GAAG,aAAa,IAAI;AAC7B"}

package/dist/lib/format-activity-duration.d.ts

@@ -0,0 +1,5 @@
+//#region src/lib/format-activity-duration.d.ts
+declare function formatActivityDuration(startedAt: Date, now: Date): string;
+//#endregion
+export { formatActivityDuration };
+//# sourceMappingURL=format-activity-duration.d.ts.map

package/dist/lib/format-activity-duration.js.map

@@ -1 +1 @@
-{"version":3,"file":"format-activity-duration.js","names":[],"sources":["../../src/lib/format-activity-duration.ts"],"sourcesContent":["import { formatDuration, intervalToDuration } from 'date-fns'\n\nconst UNITS = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'] as const\n\nconst JUST_NOW_MS = 60_000\n\nexport function formatActivityDuration(startedAt: Date, now: Date): string {\n  const start = startedAt instanceof Date ? startedAt : new Date(startedAt)\n  const elapsedMs = now.getTime() - start.getTime()\n  if (elapsedMs < JUST_NOW_MS) {\n    return 'just now'\n  }\n\n  const duration = intervalToDuration({ start, end: now })\n  const unit = UNITS.find(name => (duration[name] ?? 0) > 0)\n  if (!unit) {\n    return 'just now'\n  }\n\n  return `for ${formatDuration({ [unit]: duration[unit] }, { format: [unit] })}`\n}\n"],"mappings":";;AAEA,MAAM,QAAQ;CAAC;CAAS;CAAU;CAAS;CAAQ;CAAS;AAAS;AAErE,MAAM,cAAc;AAEpB,SAAgB,uBAAuB,WAAiB,KAAmB;CACzE,MAAM,QAAQ,qBAAqB,OAAO,YAAY,IAAI,KAAK,SAAS;CAExE,IADkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,IAChC,aACd,OAAO;CAGT,MAAM,WAAW,mBAAmB;EAAE;EAAO,KAAK;CAAI,CAAC;CACvD,MAAM,OAAO,MAAM,MAAK,UAAS,SAAS,SAAS,KAAK,CAAC;CACzD,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,OAAO,eAAe,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC7E"}
+{"version":3,"file":"format-activity-duration.js","names":[],"sources":["../../src/lib/format-activity-duration.ts"],"sourcesContent":["import { formatDuration, intervalToDuration } from 'date-fns'\n\nconst UNITS = ['years', 'months', 'weeks', 'days', 'hours', 'minutes'] as const\n\nconst JUST_NOW_MS = 60000\n\nexport function formatActivityDuration(startedAt: Date, now: Date): string {\n  const start = startedAt instanceof Date ? startedAt : new Date(startedAt)\n  const elapsedMs = now.getTime() - start.getTime()\n  if (elapsedMs < JUST_NOW_MS) {\n    return 'just now'\n  }\n\n  const duration = intervalToDuration({ start, end: now })\n  const unit = UNITS.find(name => (duration[name] ?? 0) > 0)\n  if (!unit) {\n    return 'just now'\n  }\n\n  return `for ${formatDuration({ [unit]: duration[unit] }, { format: [unit] })}`\n}\n"],"mappings":";;AAEA,MAAM,QAAQ;CAAC;CAAS;CAAU;CAAS;CAAQ;CAAS;AAAS;AAErE,MAAM,cAAc;AAEpB,SAAgB,uBAAuB,WAAiB,KAAmB;CACzE,MAAM,QAAQ,qBAAqB,OAAO,YAAY,IAAI,KAAK,SAAS;CAExE,IADkB,IAAI,QAAQ,IAAI,MAAM,QAAQ,IAChC,aACd,OAAO;CAGT,MAAM,WAAW,mBAAmB;EAAE;EAAO,KAAK;CAAI,CAAC;CACvD,MAAM,OAAO,MAAM,MAAK,UAAS,SAAS,SAAS,KAAK,CAAC;CACzD,IAAI,CAAC,MACH,OAAO;CAGT,OAAO,OAAO,eAAe,GAAG,OAAO,SAAS,MAAM,GAAG,EAAE,QAAQ,CAAC,IAAI,EAAE,CAAC;AAC7E"}

package/dist/lib/icon-url.d.ts

@@ -0,0 +1,5 @@
+//#region src/lib/icon-url.d.ts
+declare function iconImageUrl(baseUrl: string, hash: string): string;
+//#endregion
+export { iconImageUrl };
+//# sourceMappingURL=icon-url.d.ts.map

package/dist/lib/index.d.ts

@@ -0,0 +1,4 @@
+import { PresenceActivity, ShowablePresence, getShowablePresence } from "./showable-presence.js";
+import { formatActivityDuration } from "./format-activity-duration.js";
+import { iconImageUrl } from "./icon-url.js";
+export { type PresenceActivity, type ShowablePresence, formatActivityDuration, getShowablePresence, iconImageUrl };

package/dist/lib/index.js

@@ -0,0 +1,4 @@
+import { getShowablePresence } from "./showable-presence.js";
+import { formatActivityDuration } from "./format-activity-duration.js";
+import { iconImageUrl } from "./icon-url.js";
+export { formatActivityDuration, getShowablePresence, iconImageUrl };

package/dist/lib/showable-presence.d.ts

@@ -7,6 +7,7 @@ type PresenceActivity = NonNullable<PresenceWithActivity['activity']>;
 type ShowablePresence = Omit<PresenceWithActivity, 'activity'> & {
   activity: PresenceActivity;
 };
+declare function getShowablePresence(presence: GetResolvedUserPresenceResponse | undefined): ShowablePresence | null;
 //#endregion
-export { PresenceActivity, ShowablePresence };
+export { PresenceActivity, ShowablePresence, getShowablePresence };
 //# sourceMappingURL=showable-presence.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cairntale/chimeling-react",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0-alpha.2",
   "private": false,
   "description": "Chimeling React library",
   "homepage": "https://chimeling.app/",
@@ -26,26 +26,37 @@
   "dependencies": {
     "@base-ui/react": "^1.7.0",
     "date-fns": "^4.4.0",
+    "dialkit": "^2.0.0",
+    "es-toolkit": "^1.52.0",
     "swr": "^2.3.6",
     "ufo": "^1.6.4",
+    "zustand": "^5.0.15",
     "@cairntale/chimeling-js": "1.0.0-alpha.1"
   },
   "devDependencies": {
     "@arethetypeswrong/core": "^0.18.5",
+    "@emotion/cache": "^11.14.0",
+    "@emotion/react": "^11.14.0",
     "@types/react": "^19.1.8",
     "@types/react-dom": "^19.1.6",
+    "motion": "^13.2.0",
     "publint": "^0.3.24",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsdown": "^0.22.14",
-    "typescript": "6.0.3"
+    "typescript": "6.0.3",
+    "unplugin-raw": "^0.8.0"
   },
   "peerDependencies": {
+    "@emotion/cache": "^11.0.0",
+    "@emotion/react": "^11.0.0",
+    "motion": "^13.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   },
   "scripts": {
     "build": "tsdown",
+    "dev": "tsdown --watch",
     "typecheck": "tsc"
   }
 }

package/dist/lib/presence-key.js

@@ -1,14 +0,0 @@
-import { PACKAGE_NAME } from "./config.js";
-//#region src/lib/presence-key.ts
-function resolvedUserPresenceKey(userId, baseUrl) {
-	return [
-		PACKAGE_NAME,
-		"resolved-user-presence",
-		baseUrl,
-		userId
-	];
-}
-//#endregion
-export { resolvedUserPresenceKey };
-
-//# sourceMappingURL=presence-key.js.map

package/dist/lib/presence-key.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"presence-key.js","names":[],"sources":["../../src/lib/presence-key.ts"],"sourcesContent":["import { PACKAGE_NAME } from './config'\n\nexport function resolvedUserPresenceKey(userId: string, baseUrl: string) {\n  return [PACKAGE_NAME, 'resolved-user-presence', baseUrl, userId] as const\n}\n"],"mappings":";;AAEA,SAAgB,wBAAwB,QAAgB,SAAiB;CACvE,OAAO;EAAC;EAAc;EAA0B;EAAS;CAAM;AACjE"}