@dxos/react-ui-card 0.8.2 → 0.11.0

package/LICENSE

@@ -1,8 +1,105 @@
-MIT License 
-Copyright (c) 2022 DXOS
+# Functional Source License, Version 1.1, ALv2 Future License
 
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+## Abbreviation
 
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+FSL-1.1-Apache-2.0
 
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+## Notice
+
+Copyright 2026 DXOS
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the Apache License, Version 2.0 that is effective on the second anniversary of
+the date we make the Software available. On or after that date, you may use the
+Software under the Apache License, Version 2.0, in which case the following
+will apply:
+
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License.
+
+You may obtain a copy of the License at
+
+http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed
+under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
+CONDITIONS OF ANY KIND, either express or implied. See the License for the
+specific language governing permissions and limitations under the License.

package/dist/lib/index.mjs

@@ -0,0 +1,288 @@
+import { translationKey } from "./translations.mjs";
+import { toHue } from "@dxos/util";
+import { forwardRef, useCallback, useMemo, useRef } from "react";
+import { DxAvatar } from "@dxos/lit-ui/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Card, DxAnchorActivate, Icon, IconButton, SystemIconButton, Tag, useTranslation } from "@dxos/react-ui";
+import { Focus, Mosaic } from "@dxos/react-ui-mosaic";
+import { format, intervalToDuration } from "date-fns";
+import { Filter, Obj } from "@dxos/echo";
+import { EID } from "@dxos/keys";
+import { toHue as toHue$1 } from "@dxos/ui-theme";
+import { useQuery } from "@dxos/echo-react";
+import { Person } from "@dxos/types";
+//#region src/util.ts
+/** Deterministic string hash (djb2), used to map a name to a stable avatar hue. */
+var hashString = (str) => str ? Math.abs(str.split("").reduce((hash, char) => (hash << 5) + hash + char.charCodeAt(0), 0)) : 0;
+//#endregion
+//#region src/components/Avatar/avatar-name.ts
+/** Canonical display name for an actor — the avatar glyph fallback and the hue key are both derived from it. */
+var avatarName = (actor) => actor?.contact?.target?.fullName ?? actor?.name ?? actor?.email ?? "";
+/** Single source for a name→hue mapping, so the same sender is one color across every surface. */
+var nameToHue = (name) => toHue(hashString(name));
+//#endregion
+//#region src/components/Avatar/Avatar.tsx
+/**
+* Sender/participant avatar with one shared name→hue derivation ({@link nameToHue}) so a given
+* person renders the same color across the mailbox list, the opened thread, and preview cards —
+* previously each site hand-rolled `DxAvatar` off a different input.
+*/
+var Avatar = ({ actor, name, variant = "circle", size = 6, onClick }) => {
+	const label = name ?? avatarName(actor);
+	return /* @__PURE__ */ jsx(DxAvatar, {
+		hue: nameToHue(label),
+		hueVariant: "surface",
+		variant,
+		size,
+		fallback: label,
+		onClick
+	});
+};
+Avatar.displayName = "Avatar";
+//#endregion
+//#region src/hooks/useActorContact.ts
+var useActorContact = (db, actor) => {
+	const contacts = useQuery(!!actor?.contact ? void 0 : db, Filter.type(Person.Person));
+	const existingContact = useMemo(() => contacts.find((contact) => contact.emails?.find((email) => email.value === actor?.email)), [contacts, actor?.email]);
+	return useMemo(() => actor?.contact ? EID.tryParse(actor.contact.uri) : existingContact ? EID.parse(Obj.getURI(existingContact)) : void 0, [actor?.contact, existingContact]);
+};
+//#endregion
+//#region src/components/Row/Row.tsx
+/**
+* Icon-only button that opens an ECHO object's preview card via `DxAnchorActivate`.
+* Falls back to `onClick` when `value` is absent.
+*/
+var AnchorIconButton = ({ compact, icon, fallbackIcon, label, fallbackLabel, title, value, size = 4, onClick }) => {
+	const buttonRef = useRef(null);
+	const handleClick = useCallback(() => {
+		if (value) buttonRef.current?.dispatchEvent(new DxAnchorActivate({
+			trigger: buttonRef.current,
+			dxn: value.toString(),
+			label,
+			kind: "card",
+			title
+		}));
+		else onClick?.();
+	}, [
+		value,
+		label,
+		title,
+		onClick
+	]);
+	return /* @__PURE__ */ jsx(IconButton, {
+		classNames: compact ? "min-h-0" : "aspect-square",
+		variant: "ghost",
+		disabled: !value && !onClick,
+		icon: value ? icon : fallbackIcon ?? icon,
+		iconOnly: true,
+		size,
+		label: value ? label : fallbackLabel ?? label,
+		onClick: handleClick,
+		ref: buttonRef
+	});
+};
+/** A Card.Row rendering a date or date range with a calendar icon. */
+var RowDate = ({ start, end }) => {
+	let { hours = 0, minutes = 0 } = (end && intervalToDuration({
+		start,
+		end
+	})) ?? {};
+	if (hours === 1 && minutes !== 0) {
+		hours = 0;
+		minutes += 60;
+	}
+	const duration = [hours > 0 && `${hours}h`, minutes > 0 && `${minutes}m`].filter(Boolean).join(" ");
+	return /* @__PURE__ */ jsxs(Card.Row, { children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Icon, { icon: "ph--calendar--regular" }) }), /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2 overflow-hidden whitespace-nowrap",
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "truncate text-description",
+			children: format(start, "PPp")
+		}), duration.length > 0 && /* @__PURE__ */ jsxs("div", {
+			className: "text-description text-xs",
+			children: [
+				"(",
+				duration,
+				")"
+			]
+		})]
+	})] });
+};
+RowDate.displayName = "Row.Date";
+/** A Card.Row rendering an ECHO ref/relation with a card-preview anchor icon. */
+var RowRef = ({ object }) => {
+	const label = Obj.getLabel(object, { fallback: "typename" }) ?? "object";
+	const icon = Obj.getIcon(object)?.icon ?? "ph--cube--regular";
+	const echoUri = EID.tryParse(Obj.getURI(object).toString());
+	return /* @__PURE__ */ jsxs(Card.Row, { children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(AnchorIconButton, {
+		icon,
+		label,
+		title: label,
+		value: echoUri
+	}) }), /* @__PURE__ */ jsx("div", {
+		className: "flex items-center",
+		children: /* @__PURE__ */ jsx("span", {
+			className: "truncate text-primary-text",
+			children: label
+		})
+	})] });
+};
+RowRef.displayName = "Row.Ref";
+/**
+* Static avatar variant — no contact resolution. Suitable for virtualized list tiles.
+*/
+var PersonAvatarRow = ({ actor, onClick }) => /* @__PURE__ */ jsxs(Card.Row, { children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Avatar, {
+	actor,
+	onClick
+}) }), /* @__PURE__ */ jsx(Card.Text, { children: avatarName(actor) || actor.email })] });
+/**
+* Interactive variant — resolves the contact to a card-preview anchor, with a create-contact fallback.
+*/
+var PersonAnchorRow = ({ actor, role, db, onContactCreate, onRemove }) => {
+	const { t } = useTranslation(translationKey);
+	const contactDXN = useActorContact(db, actor);
+	const handleContactCreate = useCallback(() => onContactCreate?.(actor), [actor, onContactCreate]);
+	return /* @__PURE__ */ jsxs(Card.Row, { children: [
+		/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(AnchorIconButton, {
+			icon: "ph--user--regular",
+			fallbackIcon: "ph--user-plus--regular",
+			label: t("show-contact.label"),
+			fallbackLabel: t("create-contact.label"),
+			title: role ? `${role}: ${actor.name}` : actor.name,
+			value: contactDXN,
+			onClick: onContactCreate ? handleContactCreate : void 0
+		}) }),
+		/* @__PURE__ */ jsx(Card.Text, { children: actor.name || actor.email }),
+		onRemove && /* @__PURE__ */ jsx(Card.Block, {
+			end: true,
+			children: /* @__PURE__ */ jsx(IconButton, {
+				variant: "ghost",
+				iconOnly: true,
+				icon: "ph--x--regular",
+				label: t("remove-attendee.label"),
+				onClick: onRemove
+			})
+		})
+	] });
+};
+/** A Card.Row rendering a person (sender, recipient, attendee). */
+var RowPerson = ({ avatar, onClick, ...props }) => avatar ? /* @__PURE__ */ jsx(PersonAvatarRow, {
+	actor: props.actor,
+	onClick
+}) : /* @__PURE__ */ jsx(PersonAnchorRow, { ...props });
+RowPerson.displayName = "Row.Person";
+/** A Card.Row rendering a set of label+hue tag chips, optionally clickable. */
+var RowTags = ({ tags, onTagClick }) => {
+	if (!tags?.length) return null;
+	return /* @__PURE__ */ jsxs(Card.Row, { children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Icon, { icon: "ph--tag--regular" }) }), /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-1 py-1 -mx-0.5",
+		"data-testid": "extracted-tags",
+		children: tags.map((tag) => /* @__PURE__ */ jsx(Tag, {
+			hue: toHue$1(tag.hue),
+			"data-testid": `message-tag-${tag.id}`,
+			onClick: onTagClick ? (event) => {
+				event.stopPropagation();
+				onTagClick(tag.label ?? tag.id);
+			} : void 0,
+			children: tag.label ?? tag.id
+		}, tag.id))
+	})] });
+};
+RowTags.displayName = "Row.Tags";
+/**
+* A Card.Row listing a message's attachments by name with a generic file icon. Not yet clickable —
+* resolving the attachment's ref to open/preview it is a follow-up.
+*/
+var RowAttachments = ({ attachments }) => {
+	if (!attachments?.length) return null;
+	return /* @__PURE__ */ jsxs(Card.Row, { children: [/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Icon, { icon: "ph--paperclip--regular" }) }), /* @__PURE__ */ jsx("div", {
+		className: "flex flex-wrap gap-1 py-1 -mx-0.5",
+		"data-testid": "message-attachments",
+		children: attachments.map((attachment) => /* @__PURE__ */ jsxs(Tag, {
+			hue: "neutral",
+			classNames: "inline-flex items-center gap-1",
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph--file--regular",
+				size: 3
+			}), attachment.name ?? attachment.ref.uri]
+		}, attachment.ref.uri))
+	})] });
+};
+RowAttachments.displayName = "Row.Attachments";
+/**
+* Star toggle for a `Card.Block` leading gutter (shared by event/message tiles and headers). Stops
+* the click from bubbling so starring doesn't also select/activate the surrounding tile or card.
+*/
+var RowStar = ({ starred, onToggle }) => {
+	const handleClick = useCallback((event) => {
+		event.stopPropagation();
+		onToggle?.();
+	}, [onToggle]);
+	if (!onToggle) return null;
+	return /* @__PURE__ */ jsx(SystemIconButton.Star, {
+		iconOnly: true,
+		variant: "ghost",
+		active: starred,
+		onClick: handleClick
+	});
+};
+RowStar.displayName = "Row.Star";
+var Row = {
+	Date: RowDate,
+	Ref: RowRef,
+	Person: RowPerson,
+	Tags: RowTags,
+	Attachments: RowAttachments,
+	Star: RowStar
+};
+//#endregion
+//#region src/components/CardTile/CardTile.tsx
+/**
+* Shared mosaic tile shell: `Mosaic.Tile` → `Focus.Item` → `Card.Root`.
+* Callers supply the inner `Card.Header`/`Card.Body` (typically via {@link CardTileHeader} + rows).
+* Activation is committed by the caller's `onCurrentChange` (Mosaic `current`/selection), so click/Enter light the tile up.
+*/
+var CardTileRoot = forwardRef(({ id, data, location, current, onCurrentChange, onClick, classNames, children, "data-testid": testId }, forwardedRef) => /* @__PURE__ */ jsx(Mosaic.Tile, {
+	asChild: true,
+	id,
+	data,
+	location,
+	classNames: classNames ?? "dx-hover dx-current dx-selected p-1 rounded-md border border-subdued-separator",
+	children: /* @__PURE__ */ jsx(Focus.Item, {
+		asChild: true,
+		current,
+		onCurrentChange,
+		children: /* @__PURE__ */ jsx(Card.Root, {
+			fullWidth: true,
+			border: false,
+			onClick,
+			ref: forwardedRef,
+			"data-testid": testId,
+			children
+		})
+	})
+}));
+CardTileRoot.displayName = "CardTile.Root";
+/**
+* Tile header row: leading `Row.Star` · title · optional `Card.Menu`. Shared by message/conversation
+* tiles (with menu) and event tiles (star + title only).
+*/
+var CardTileHeader = ({ title, starred, menu = false, menuItems, onToggleStar }) => /* @__PURE__ */ jsxs(Card.Header, { children: [
+	/* @__PURE__ */ jsx(Card.Block, { children: /* @__PURE__ */ jsx(Row.Star, {
+		starred,
+		onToggle: onToggleStar
+	}) }),
+	/* @__PURE__ */ jsx(Card.Title, {
+		classNames: "flex items-center gap-3",
+		children: title
+	}),
+	menu && /* @__PURE__ */ jsx(Card.Menu, { items: menuItems })
+] });
+CardTileHeader.displayName = "CardTile.Header";
+var CardTile = {
+	Root: CardTileRoot,
+	Header: CardTileHeader
+};
+//#endregion
+export { Avatar, CardTile, Row, avatarName, hashString, nameToHue, useActorContact };
+
+//# sourceMappingURL=index.mjs.map

package/dist/lib/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","names":[],"sources":["../../src/util.ts","../../src/components/Avatar/avatar-name.ts","../../src/components/Avatar/Avatar.tsx","../../src/hooks/useActorContact.ts","../../src/components/Row/Row.tsx","../../src/components/CardTile/CardTile.tsx"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\n/** Deterministic string hash (djb2), used to map a name to a stable avatar hue. */\nexport const hashString = (str?: string): number =>\n  str ? Math.abs(str.split('').reduce((hash, char) => (hash << 5) + hash + char.charCodeAt(0), 0)) : 0;\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Actor } from '@dxos/types';\nimport { toHue } from '@dxos/util';\n\nimport { hashString } from '../../util';\n\n// Kept out of `Avatar.tsx`: react-refresh only fast-refreshes a module whose\n// exports are all components, so values exported beside them force a full page reload on\n// every edit.\n\n/** Canonical display name for an actor — the avatar glyph fallback and the hue key are both derived from it. */\nexport const avatarName = (actor?: Actor.Actor): string =>\n  actor?.contact?.target?.fullName ?? actor?.name ?? actor?.email ?? '';\n\n/** Single source for a name→hue mapping, so the same sender is one color across every surface. */\nexport const nameToHue = (name?: string): string => toHue(hashString(name));\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React from 'react';\n\nimport { DxAvatar, type DxAvatarProps } from '@dxos/lit-ui/react';\nimport { type Actor } from '@dxos/types';\n\nimport { avatarName } from './avatar-name';\nimport { nameToHue } from './avatar-name';\n\nexport type AvatarProps = Pick<DxAvatarProps, 'variant' | 'size' | 'onClick'> & {\n  /** Sender/participant; supplies the display name and the hue. */\n  actor?: Actor.Actor;\n  /** Label override; defaults to the actor's {@link avatarName}. */\n  name?: string;\n};\n\n/**\n * Sender/participant avatar with one shared name→hue derivation ({@link nameToHue}) so a given\n * person renders the same color across the mailbox list, the opened thread, and preview cards —\n * previously each site hand-rolled `DxAvatar` off a different input.\n */\nexport const Avatar = ({ actor, name, variant = 'circle', size = 6, onClick }: AvatarProps) => {\n  const label = name ?? avatarName(actor);\n  return (\n    <DxAvatar\n      hue={nameToHue(label)}\n      hueVariant='surface'\n      variant={variant}\n      size={size}\n      fallback={label}\n      onClick={onClick}\n    />\n  );\n};\n\nAvatar.displayName = 'Avatar';\n","//\n// Copyright 2025 DXOS.org\n//\n\nimport { useMemo } from 'react';\n\nimport { type Database, Filter, Obj } from '@dxos/echo';\nimport { useQuery } from '@dxos/echo-react';\nimport { EID } from '@dxos/keys';\nimport { type Actor, Person } from '@dxos/types';\n\n// TODO(burdon): Factor out lazy update pattern.\nexport const useActorContact = (db?: Database.Database, actor?: Actor.Actor): EID.EID | undefined => {\n  // Don't bother querying the space if there is already a reference to the contact.\n  const isLinked = !!actor?.contact;\n  const contacts = useQuery(isLinked ? undefined : db, Filter.type(Person.Person));\n  const existingContact = useMemo(\n    () => contacts.find((contact) => contact.emails?.find((email) => email.value === actor?.email)),\n    [contacts, actor?.email],\n  );\n\n  return useMemo(\n    () =>\n      actor?.contact\n        ? EID.tryParse(actor.contact.uri)\n        : existingContact\n          ? EID.parse(Obj.getURI(existingContact))\n          : undefined,\n    [actor?.contact, existingContact],\n  );\n};\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport { format, intervalToDuration } from 'date-fns';\nimport React, { type MouseEvent, useCallback, useRef } from 'react';\n\nimport { type Database, Obj } from '@dxos/echo';\nimport { EID, type URI } from '@dxos/keys';\nimport {\n  Card,\n  DxAnchorActivate,\n  Icon,\n  IconButton,\n  type IconButtonProps,\n  SystemIconButton,\n  Tag,\n  useTranslation,\n} from '@dxos/react-ui';\nimport { type Actor, type Message } from '@dxos/types';\nimport { toHue } from '@dxos/ui-theme';\n\nimport { useActorContact } from '../../hooks';\nimport { translationKey } from '../../translations';\nimport { Avatar, avatarName } from '../Avatar';\n\n/**\n * Shared Card-row primitives rendered inside a `Card.Body`. These are the single source for the\n * person/date/tags/ref/star rows used across the inbox tiles (`EventStack`/`InboxStack`), the preview\n * cards (`EventCard`/`MessageCard`), and the article headers — so a row of each kind is defined exactly\n * once and every surface composes from it.\n */\n\n//\n// AnchorIconButton — internal helper, not exported on Row.\n//\n\ntype AnchorIconButtonProps = {\n  compact?: boolean;\n  icon: string;\n  fallbackIcon?: string;\n  label: string;\n  fallbackLabel?: string;\n  title?: string;\n  value?: URI.URI;\n  size?: 4 | 5 | 6;\n  onClick?: () => void;\n};\n\n/**\n * Icon-only button that opens an ECHO object's preview card via `DxAnchorActivate`.\n * Falls back to `onClick` when `value` is absent.\n */\nconst AnchorIconButton = ({\n  compact,\n  icon,\n  fallbackIcon,\n  label,\n  fallbackLabel,\n  title,\n  value,\n  size = 4,\n  onClick,\n}: AnchorIconButtonProps) => {\n  const buttonRef = useRef<HTMLButtonElement>(null);\n\n  const handleClick = useCallback(() => {\n    if (value) {\n      buttonRef.current?.dispatchEvent(\n        new DxAnchorActivate({\n          trigger: buttonRef.current,\n          dxn: value.toString(),\n          label,\n          kind: 'card',\n          title,\n        }),\n      );\n    } else {\n      onClick?.();\n    }\n  }, [value, label, title, onClick]);\n\n  return (\n    <IconButton\n      classNames={compact ? 'min-h-0' : 'aspect-square'}\n      variant='ghost'\n      disabled={!value && !onClick}\n      icon={value ? icon : (fallbackIcon ?? icon)}\n      iconOnly\n      size={size}\n      label={value ? label : (fallbackLabel ?? label)}\n      onClick={handleClick}\n      ref={buttonRef}\n    />\n  );\n};\n\n//\n// Date\n//\n\ntype RowDateProps = {\n  start: Date;\n  end?: Date;\n};\n\n/** A Card.Row rendering a date or date range with a calendar icon. */\nconst RowDate = ({ start, end }: RowDateProps) => {\n  let { hours = 0, minutes = 0 } = (end && intervalToDuration({ start, end })) ?? {};\n  // Prefer 90m over 1h 30m.\n  if (hours === 1 && minutes !== 0) {\n    hours = 0;\n    minutes += 60;\n  }\n  const duration = [hours > 0 && `${hours}h`, minutes > 0 && `${minutes}m`].filter(Boolean).join(' ');\n\n  return (\n    <Card.Row>\n      <Card.Block>\n        <Icon icon='ph--calendar--regular' />\n      </Card.Block>\n      <div className='flex items-center gap-2 overflow-hidden whitespace-nowrap'>\n        <div className='truncate text-description'>{format(start, 'PPp')}</div>\n        {duration.length > 0 && <div className='text-description text-xs'>({duration})</div>}\n      </div>\n    </Card.Row>\n  );\n};\n\nRowDate.displayName = 'Row.Date';\n\n//\n// Ref\n//\n\ntype RowRefProps = {\n  object: Obj.Any;\n};\n\n/** A Card.Row rendering an ECHO ref/relation with a card-preview anchor icon. */\nconst RowRef = ({ object }: RowRefProps) => {\n  const label = Obj.getLabel(object, { fallback: 'typename' }) ?? 'object';\n  const icon = Obj.getIcon(object)?.icon ?? 'ph--cube--regular';\n  const echoUri = EID.tryParse(Obj.getURI(object).toString());\n\n  // TODO(burdon): Nav?\n  return (\n    <Card.Row>\n      <Card.Block>\n        <AnchorIconButton icon={icon} label={label} title={label} value={echoUri} />\n      </Card.Block>\n      <div className='flex items-center'>\n        <span className='truncate text-primary-text'>{label}</span>\n      </div>\n    </Card.Row>\n  );\n};\n\nRowRef.displayName = 'Row.Ref';\n\n//\n// Person\n//\n\n/** Recipient/participant kind; drives the leading icon and accessible label. */\nexport type PersonRole = 'from' | 'to' | 'cc' | 'bcc' | 'attendee';\n\ntype RowPersonProps = {\n  actor: Actor.Actor;\n  /** Recipient/participant kind (icon + aria only; no visible prefix). */\n  role?: PersonRole;\n  /**\n   * Render a static `DxAvatar` in the gutter (hook-free) instead of the interactive contact anchor.\n   * Used by list tiles where resolving a contact per row (a hook) would be too costly.\n   */\n  avatar?: boolean;\n  db?: Database.Database;\n  onContactCreate?: (actor: Actor.Actor) => void;\n  /** Render a trailing remove button (e.g. attendee rows in the editable event header). */\n  onRemove?: () => void;\n  /** Click handler for the avatar (e.g. select the message); avatar variant only. */\n  onClick?: (event: MouseEvent) => void;\n};\n\n/**\n * Static avatar variant — no contact resolution. Suitable for virtualized list tiles.\n */\nconst PersonAvatarRow = ({ actor, onClick }: Pick<RowPersonProps, 'actor' | 'onClick'>) => (\n  <Card.Row>\n    <Card.Block>\n      <Avatar actor={actor} onClick={onClick} />\n    </Card.Block>\n    <Card.Text>{avatarName(actor) || actor.email}</Card.Text>\n  </Card.Row>\n);\n\n/**\n * Interactive variant — resolves the contact to a card-preview anchor, with a create-contact fallback.\n */\nconst PersonAnchorRow = ({\n  actor,\n  role,\n  db,\n  onContactCreate,\n  onRemove,\n}: Omit<RowPersonProps, 'avatar' | 'onClick'>) => {\n  const { t } = useTranslation(translationKey);\n  const contactDXN = useActorContact(db, actor);\n\n  const handleContactCreate = useCallback(() => onContactCreate?.(actor), [actor, onContactCreate]);\n\n  // TODO(burdon): Reconcile with Avatar if space member.\n  return (\n    <Card.Row>\n      <Card.Block>\n        <AnchorIconButton\n          icon='ph--user--regular'\n          fallbackIcon='ph--user-plus--regular'\n          label={t('show-contact.label')}\n          fallbackLabel={t('create-contact.label')}\n          title={role ? `${role}: ${actor.name}` : actor.name}\n          value={contactDXN}\n          onClick={onContactCreate ? handleContactCreate : undefined}\n        />\n      </Card.Block>\n      <Card.Text>{actor.name || actor.email}</Card.Text>\n      {onRemove && (\n        <Card.Block end>\n          <IconButton\n            variant='ghost'\n            iconOnly\n            icon='ph--x--regular'\n            label={t('remove-attendee.label')}\n            onClick={onRemove}\n          />\n        </Card.Block>\n      )}\n    </Card.Row>\n  );\n};\n\n/** A Card.Row rendering a person (sender, recipient, attendee). */\nconst RowPerson = ({ avatar, onClick, ...props }: RowPersonProps) =>\n  avatar ? <PersonAvatarRow actor={props.actor} onClick={onClick} /> : <PersonAnchorRow {...props} />;\n\nRowPerson.displayName = 'Row.Person';\n\n//\n// Tags\n//\n\ntype TagItem = { id: string; label?: string; hue?: string };\n\ntype RowTagsProps = {\n  /** Optional — callers may pass an undefined/empty list (e.g. a message with no tags). */\n  tags?: TagItem[];\n  /** When provided, each chip is clickable and stops event propagation. */\n  onTagClick?: (label: string) => void;\n};\n\n/** A Card.Row rendering a set of label+hue tag chips, optionally clickable. */\nconst RowTags = ({ tags, onTagClick }: RowTagsProps) => {\n  if (!tags?.length) {\n    return null;\n  }\n\n  return (\n    <Card.Row>\n      <Card.Block>\n        <Icon icon='ph--tag--regular' />\n      </Card.Block>\n      <div className='flex flex-wrap gap-1 py-1 -mx-0.5' data-testid='extracted-tags'>\n        {tags.map((tag) => (\n          <Tag\n            key={tag.id}\n            hue={toHue(tag.hue)}\n            data-testid={`message-tag-${tag.id}`}\n            onClick={\n              onTagClick\n                ? (event) => {\n                    event.stopPropagation();\n                    onTagClick(tag.label ?? tag.id);\n                  }\n                : undefined\n            }\n          >\n            {tag.label ?? tag.id}\n          </Tag>\n        ))}\n      </div>\n    </Card.Row>\n  );\n};\n\nRowTags.displayName = 'Row.Tags';\n\n//\n// Attachments\n//\n\ntype RowAttachmentsProps = {\n  /** Optional — callers may pass an undefined/empty list (e.g. a message with no attachments). */\n  attachments?: readonly Message.Attachment[];\n};\n\n/**\n * A Card.Row listing a message's attachments by name with a generic file icon. Not yet clickable —\n * resolving the attachment's ref to open/preview it is a follow-up.\n */\nconst RowAttachments = ({ attachments }: RowAttachmentsProps) => {\n  if (!attachments?.length) {\n    return null;\n  }\n\n  return (\n    <Card.Row>\n      <Card.Block>\n        <Icon icon='ph--paperclip--regular' />\n      </Card.Block>\n      <div className='flex flex-wrap gap-1 py-1 -mx-0.5' data-testid='message-attachments'>\n        {attachments.map((attachment) => (\n          <Tag key={attachment.ref.uri} hue='neutral' classNames='inline-flex items-center gap-1'>\n            <Icon icon='ph--file--regular' size={3} />\n            {attachment.name ?? attachment.ref.uri}\n          </Tag>\n        ))}\n      </div>\n    </Card.Row>\n  );\n};\n\nRowAttachments.displayName = 'Row.Attachments';\n\n//\n// Star\n//\n\ntype RowStarProps = {\n  starred?: boolean;\n  /** Toggle handler; the button renders only when provided. */\n  onToggle?: () => void;\n};\n\n/**\n * Star toggle for a `Card.Block` leading gutter (shared by event/message tiles and headers). Stops\n * the click from bubbling so starring doesn't also select/activate the surrounding tile or card.\n */\nconst RowStar = ({ starred, onToggle }: RowStarProps) => {\n  const handleClick = useCallback<NonNullable<IconButtonProps['onClick']>>(\n    (event) => {\n      event.stopPropagation();\n      onToggle?.();\n    },\n    [onToggle],\n  );\n\n  if (!onToggle) {\n    return null;\n  }\n\n  return <SystemIconButton.Star iconOnly variant='ghost' active={starred} onClick={handleClick} />;\n};\n\nRowStar.displayName = 'Row.Star';\n\n//\n// Row\n//\n\nexport const Row = {\n  Date: RowDate,\n  Ref: RowRef,\n  Person: RowPerson,\n  Tags: RowTags,\n  Attachments: RowAttachments,\n  Star: RowStar,\n};\n\nexport type { RowAttachmentsProps, RowDateProps, RowPersonProps, RowRefProps, RowStarProps, RowTagsProps };\n","//\n// Copyright 2026 DXOS.org\n//\n\nimport React, { type MouseEvent, PropsWithChildren, type ReactNode, forwardRef } from 'react';\n\nimport { Card, type ThemedClassName } from '@dxos/react-ui';\nimport { Focus, Mosaic, type MosaicTileProps } from '@dxos/react-ui-mosaic';\n\nimport { Row } from '../Row';\n\n//\n// Root\n//\n\ntype CardTileRootProps = ThemedClassName<\n  PropsWithChildren<\n    Pick<MosaicTileProps<unknown>, 'data' | 'location' | 'current'> & {\n      'id': string;\n      'onCurrentChange': () => void;\n      'onClick'?: (event: MouseEvent) => void;\n      'data-testid'?: string;\n    }\n  >\n>;\n\n/**\n * Shared mosaic tile shell: `Mosaic.Tile` → `Focus.Item` → `Card.Root`.\n * Callers supply the inner `Card.Header`/`Card.Body` (typically via {@link CardTileHeader} + rows).\n * Activation is committed by the caller's `onCurrentChange` (Mosaic `current`/selection), so click/Enter light the tile up.\n */\nconst CardTileRoot = forwardRef<HTMLDivElement, CardTileRootProps>(\n  (\n    { id, data, location, current, onCurrentChange, onClick, classNames, children, 'data-testid': testId },\n    forwardedRef,\n  ) => (\n    <Mosaic.Tile\n      asChild\n      id={id}\n      data={data}\n      location={location}\n      classNames={classNames ?? 'dx-hover dx-current dx-selected p-1 rounded-md border border-subdued-separator'}\n    >\n      <Focus.Item asChild current={current} onCurrentChange={onCurrentChange}>\n        <Card.Root fullWidth border={false} onClick={onClick} ref={forwardedRef} data-testid={testId}>\n          {children}\n        </Card.Root>\n      </Focus.Item>\n    </Mosaic.Tile>\n  ),\n);\n\nCardTileRoot.displayName = 'CardTile.Root';\n\n//\n// Header\n//\n\n/** A single `Card.Menu` dropdown item. */\nexport type CardTileMenuItem = {\n  label: string;\n  icon?: string;\n  onClick: () => void;\n};\n\ntype CardTileHeaderProps = {\n  /** Header title content (rendered in a flex row). */\n  title: ReactNode;\n  /** Whether the tile is starred. `Row.Star` renders the button only when `onToggleStar` is set. */\n  starred?: boolean;\n  /** Render the trailing `Card.Menu` action slot. */\n  menu?: boolean;\n  /** Items for the `Card.Menu` dropdown (the trigger is disabled when empty). */\n  menuItems?: CardTileMenuItem[];\n  onToggleStar?: () => void;\n};\n\n/**\n * Tile header row: leading `Row.Star` · title · optional `Card.Menu`. Shared by message/conversation\n * tiles (with menu) and event tiles (star + title only).\n */\nconst CardTileHeader = ({ title, starred, menu = false, menuItems, onToggleStar }: CardTileHeaderProps) => (\n  <Card.Header>\n    <Card.Block>\n      <Row.Star starred={starred} onToggle={onToggleStar} />\n    </Card.Block>\n    <Card.Title classNames='flex items-center gap-3'>{title}</Card.Title>\n    {menu && <Card.Menu items={menuItems} />}\n  </Card.Header>\n);\n\nCardTileHeader.displayName = 'CardTile.Header';\n\n//\n// Tile\n//\n\nexport const CardTile = {\n  Root: CardTileRoot,\n  Header: CardTileHeader,\n};\n\nexport type { CardTileHeaderProps, CardTileRootProps };\n"],"mappings":"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"}

package/dist/lib/translations.mjs

@@ -0,0 +1,11 @@
+//#region src/translations.ts
+var translationKey = "@dxos/react-ui-card";
+var translations = [{ "en-US": { [translationKey]: {
+	"show-contact.label": "Show contact",
+	"create-contact.label": "Create contact",
+	"remove-attendee.label": "Remove attendee"
+} } }];
+//#endregion
+export { translationKey, translations };
+
+//# sourceMappingURL=translations.mjs.map

package/dist/lib/translations.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations.mjs","names":[],"sources":["../../src/translations.ts"],"sourcesContent":["//\n// Copyright 2026 DXOS.org\n//\n\nimport { type Resource } from '@dxos/react-ui';\n\nexport const translationKey = '@dxos/react-ui-card';\n\nexport const translations = [\n  {\n    'en-US': {\n      [translationKey]: {\n        'show-contact.label': 'Show contact',\n        'create-contact.label': 'Create contact',\n        'remove-attendee.label': 'Remove attendee',\n      },\n    },\n  },\n] as const satisfies Resource[];\n"],"mappings":";AAMA,IAAa,iBAAiB;AAE9B,IAAa,eAAe,CAC1B,EACE,SAAS,GACN,iBAAiB;CAChB,sBAAsB;CACtB,wBAAwB;CACxB,yBAAyB;AAC3B,EACF,EACF,CACF"}

package/dist/types/src/components/Avatar/Avatar.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { type DxAvatarProps } from '@dxos/lit-ui/react';
+import { type Actor } from '@dxos/types';
+export type AvatarProps = Pick<DxAvatarProps, 'variant' | 'size' | 'onClick'> & {
+    /** Sender/participant; supplies the display name and the hue. */
+    actor?: Actor.Actor;
+    /** Label override; defaults to the actor's {@link avatarName}. */
+    name?: string;
+};
+export declare function Avatar({ actor, name, variant, size, onClick }: AvatarProps): React.JSX.Element;
+export declare namespace Avatar {
+    var displayName: string;
+}
+//# sourceMappingURL=Avatar.d.ts.map

package/dist/types/src/components/Avatar/Avatar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.d.ts","sourceRoot":"","sources":["../../../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAClE,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AAKzC,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,aAAa,EAAE,SAAS,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IAC9E,iEAAiE;IACjE,KAAK,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC;IACpB,kEAAkE;IAClE,IAAI,CAAC,EAAE,MAAM,CAAC;CACf,CAAC;+BAOqB,EAAE,KAAK,EAAE,IAAI,EAAE,OAAkB,EAAE,IAAQ,EAAE,OAAO,EAAE,EAAE,WAAW"}

package/dist/types/src/components/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,15 @@
+import { type StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: {
+        ({ actor, name, variant, size, onClick }: import("./Avatar").AvatarProps): import("react").JSX.Element;
+        displayName: string;
+    };
+    decorators: import("@storybook/react").Decorator[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Square: Story;
+export declare const EmailOnly: Story;
+//# sourceMappingURL=Avatar.stories.d.ts.map

package/dist/types/src/components/Avatar/Avatar.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Avatar.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/Avatar/Avatar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAMjE,QAAA,MAAM,IAAI;;;;;;;CAIqB,CAAC;eAEjB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAErB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAEpB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAEvB,CAAC"}

package/dist/types/src/components/Avatar/avatar-name.d.ts

@@ -0,0 +1,6 @@
+import { type Actor } from '@dxos/types';
+/** Canonical display name for an actor — the avatar glyph fallback and the hue key are both derived from it. */
+export declare const avatarName: (actor?: Actor.Actor) => string;
+/** Single source for a name→hue mapping, so the same sender is one color across every surface. */
+export declare const nameToHue: (name?: string) => string;
+//# sourceMappingURL=avatar-name.d.ts.map

package/dist/types/src/components/Avatar/avatar-name.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"avatar-name.d.ts","sourceRoot":"","sources":["../../../../../src/components/Avatar/avatar-name.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AASzC,gHAAgH;AAChH,eAAO,MAAM,UAAU,WAAY,KAAK,CAAC,KAAK,KAAG,MACsB,CAAC;AAExE,kGAAkG;AAClG,eAAO,MAAM,SAAS,UAAW,MAAM,KAAG,MAAiC,CAAC"}

package/dist/types/src/components/Avatar/index.d.ts

@@ -0,0 +1,3 @@
+export * from './avatar-name';
+export * from './Avatar';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/Avatar/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/Avatar/index.ts"],"names":[],"mappings":"AAIA,cAAc,eAAe,CAAC;AAE9B,cAAc,UAAU,CAAC"}

package/dist/types/src/components/CardTile/CardTile.d.ts

@@ -0,0 +1,46 @@
+import React, { type MouseEvent, PropsWithChildren, type ReactNode } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+import { type MosaicTileProps } from '@dxos/react-ui-mosaic';
+type CardTileRootProps = ThemedClassName<PropsWithChildren<Pick<MosaicTileProps<unknown>, 'data' | 'location' | 'current'> & {
+    'id': string;
+    'onCurrentChange': () => void;
+    'onClick'?: (event: MouseEvent) => void;
+    'data-testid'?: string;
+}>>;
+/** A single `Card.Menu` dropdown item. */
+export type CardTileMenuItem = {
+    label: string;
+    icon?: string;
+    onClick: () => void;
+};
+type CardTileHeaderProps = {
+    /** Header title content (rendered in a flex row). */
+    title: ReactNode;
+    /** Whether the tile is starred. `Row.Star` renders the button only when `onToggleStar` is set. */
+    starred?: boolean;
+    /** Render the trailing `Card.Menu` action slot. */
+    menu?: boolean;
+    /** Items for the `Card.Menu` dropdown (the trigger is disabled when empty). */
+    menuItems?: CardTileMenuItem[];
+    onToggleStar?: () => void;
+};
+declare function CardTileHeader({ title, starred, menu, menuItems, onToggleStar }: CardTileHeaderProps): React.JSX.Element;
+declare namespace CardTileHeader {
+    var displayName: string;
+}
+export declare const CardTile: {
+    Root: React.ForwardRefExoticComponent<Omit<PropsWithChildren<Pick<MosaicTileProps<unknown>, "current" | "data" | "location"> & {
+        id: string;
+        onCurrentChange: () => void;
+        onClick?: (event: MouseEvent) => void;
+        'data-testid'?: string;
+    }>, "className"> & {
+        classNames?: import("@dxos/ui-types").ClassNameValue;
+    } & React.RefAttributes<HTMLDivElement>>;
+    Header: {
+        ({ title, starred, menu, menuItems, onToggleStar }: CardTileHeaderProps): React.JSX.Element;
+        displayName: string;
+    };
+};
+export type { CardTileHeaderProps, CardTileRootProps };
+//# sourceMappingURL=CardTile.d.ts.map

package/dist/types/src/components/CardTile/CardTile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTile.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardTile/CardTile.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,EAAE,KAAK,UAAU,EAAE,iBAAiB,EAAE,KAAK,SAAS,EAAc,MAAM,OAAO,CAAC;AAE9F,OAAO,EAAQ,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC5D,OAAO,EAAiB,KAAK,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAQ5E,KAAK,iBAAiB,GAAG,eAAe,CACtC,iBAAiB,CACf,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC,GAAG;IAChE,IAAI,EAAE,MAAM,CAAC;IACb,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,SAAS,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB,CACF,CACF,CAAC;AAkCF,0CAA0C;AAC1C,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,CAAC;AAEF,KAAK,mBAAmB,GAAG;IACzB,qDAAqD;IACrD,KAAK,EAAE,SAAS,CAAC;IACjB,kGAAkG;IAClG,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mDAAmD;IACnD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,+EAA+E;IAC/E,SAAS,CAAC,EAAE,gBAAgB,EAAE,CAAC;IAC/B,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;gCAMsB,EAAE,KAAK,EAAE,OAAO,EAAE,IAAY,EAAE,SAAS,EAAE,YAAY,EAAE,EAAE,mBAAmB;;;;AAgBtG,eAAO,MAAM,QAAQ;IACnB,IAAI;YAhFM,MAAM;yBACO,MAAM,IAAI;kBACjB,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI;wBACvB,MAAM;;;;IA8E1B,MAAM;4DAlB2E,mBAAmB;;;CAmBrG,CAAC;AAEF,YAAY,EAAE,mBAAmB,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/types/src/components/CardTile/CardTile.stories.d.ts

@@ -0,0 +1,27 @@
+import { type StoryObj } from '@storybook/react-vite';
+import React from 'react';
+declare const meta: {
+    title: string;
+    render: ({ menu, starred }: {
+        menu?: boolean;
+        starred?: boolean;
+    }) => React.JSX.Element;
+    decorators: import("@storybook/react").Decorator[];
+    parameters: {
+        layout: string;
+        translations: [{
+            readonly 'en-US': {
+                readonly "@dxos/react-ui-card": {
+                    readonly 'show-contact.label': 'Show contact';
+                    readonly 'create-contact.label': 'Create contact';
+                    readonly 'remove-attendee.label': 'Remove attendee';
+                };
+            };
+        }];
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const NoStar: Story;
+//# sourceMappingURL=CardTile.stories.d.ts.map

package/dist/types/src/components/CardTile/CardTile.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardTile.stories.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardTile/CardTile.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAa,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACjE,OAAO,KAAK,MAAM,OAAO,CAAC;AAgC1B,QAAA,MAAM,IAAI;;gCArB+B;QAAE,IAAI,CAAC,EAAE,OAAO,CAAC;QAAC,OAAO,CAAC,EAAE,OAAO,CAAA;KAAE;;;;;;;;;;;;;;CA6BzC,CAAC;eAEvB,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAA+C,CAAC;AAEtE,eAAO,MAAM,MAAM,EAAE,KAAU,CAAC"}

package/dist/types/src/components/CardTile/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CardTile';
+//# sourceMappingURL=index.d.ts.map

package/dist/types/src/components/CardTile/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/CardTile/index.ts"],"names":[],"mappings":"AAIA,cAAc,YAAY,CAAC"}