@beyondwork/docx-react-component 1.0.28 → 1.0.29

package/src/ui/runtime-snapshot-selectors.ts

@@ -1,197 +0,0 @@
-import { useRef, useSyncExternalStore } from "react";
-import type {
-  DocumentNavigationSnapshot,
-  RuntimeRenderSnapshot,
-} from "../api/public-types.ts";
-
-export interface RuntimeSnapshotSource {
-  subscribe(listener: () => void): () => void;
-  getRenderSnapshot(): RuntimeRenderSnapshot;
-}
-
-export interface RuntimeValueSource<T> {
-  subscribe(listener: () => void): () => void;
-  getValue(): T;
-}
-
-export interface ToolbarSlice {
-  commandState: RuntimeRenderSnapshot["commandState"];
-  isDirty: RuntimeRenderSnapshot["isDirty"];
-  isReady: RuntimeRenderSnapshot["isReady"];
-  readOnly: RuntimeRenderSnapshot["readOnly"];
-  fatalError: RuntimeRenderSnapshot["fatalError"];
-}
-
-export interface SurfaceSlice {
-  revisionToken: RuntimeRenderSnapshot["revisionToken"];
-  selection: RuntimeRenderSnapshot["selection"];
-  activeStory: RuntimeRenderSnapshot["activeStory"];
-  surface: RuntimeRenderSnapshot["surface"];
-}
-
-export interface ReviewSlice {
-  comments: RuntimeRenderSnapshot["comments"];
-  trackedChanges: RuntimeRenderSnapshot["trackedChanges"];
-  compatibility: RuntimeRenderSnapshot["compatibility"];
-}
-
-export interface ViewSlice {
-  documentMode: RuntimeRenderSnapshot["documentMode"];
-  activeStory: RuntimeRenderSnapshot["activeStory"];
-  pageLayout: RuntimeRenderSnapshot["pageLayout"];
-}
-
-export interface StatusSlice {
-  warnings: RuntimeRenderSnapshot["warnings"];
-  fatalError: RuntimeRenderSnapshot["fatalError"];
-  isDirty: RuntimeRenderSnapshot["isDirty"];
-  documentStats: RuntimeRenderSnapshot["documentStats"];
-  protectionSnapshot: RuntimeRenderSnapshot["protectionSnapshot"];
-}
-
-export interface NavigationSlice {
-  documentNavigation: DocumentNavigationSnapshot | undefined;
-}
-
-export interface MetaSlice {
-  documentId: RuntimeRenderSnapshot["documentId"];
-  sessionId: RuntimeRenderSnapshot["sessionId"];
-  sourceLabel: RuntimeRenderSnapshot["sourceLabel"];
-}
-
-export function selectToolbarSlice(snapshot: RuntimeRenderSnapshot): ToolbarSlice {
-  return {
-    commandState: snapshot.commandState,
-    isDirty: snapshot.isDirty,
-    isReady: snapshot.isReady,
-    readOnly: snapshot.readOnly,
-    fatalError: snapshot.fatalError,
-  };
-}
-
-export function selectSurfaceSlice(snapshot: RuntimeRenderSnapshot): SurfaceSlice {
-  return {
-    revisionToken: snapshot.revisionToken,
-    selection: snapshot.selection,
-    activeStory: snapshot.activeStory,
-    surface: snapshot.surface,
-  };
-}
-
-export function selectReviewSlice(snapshot: RuntimeRenderSnapshot): ReviewSlice {
-  return {
-    comments: snapshot.comments,
-    trackedChanges: snapshot.trackedChanges,
-    compatibility: snapshot.compatibility,
-  };
-}
-
-export function selectViewSlice(snapshot: RuntimeRenderSnapshot): ViewSlice {
-  return {
-    documentMode: snapshot.documentMode,
-    activeStory: snapshot.activeStory,
-    pageLayout: snapshot.pageLayout,
-  };
-}
-
-export function selectStatusSlice(snapshot: RuntimeRenderSnapshot): StatusSlice {
-  return {
-    warnings: snapshot.warnings,
-    fatalError: snapshot.fatalError,
-    isDirty: snapshot.isDirty,
-    documentStats: snapshot.documentStats,
-    protectionSnapshot: snapshot.protectionSnapshot,
-  };
-}
-
-export function selectNavigationSlice(
-  documentNavigation?: DocumentNavigationSnapshot,
-): NavigationSlice {
-  return {
-    documentNavigation,
-  };
-}
-
-export function selectMetaSlice(snapshot: RuntimeRenderSnapshot): MetaSlice {
-  return {
-    documentId: snapshot.documentId,
-    sessionId: snapshot.sessionId,
-    sourceLabel: snapshot.sourceLabel,
-  };
-}
-
-export function shallowEqualRecord<T extends object>(
-  left: T,
-  right: T,
-): boolean {
-  const leftRecord = left as Record<string, unknown>;
-  const rightRecord = right as Record<string, unknown>;
-  const leftKeys = Object.keys(left);
-  const rightKeys = Object.keys(right);
-  if (leftKeys.length !== rightKeys.length) {
-    return false;
-  }
-
-  for (const key of leftKeys) {
-    if (leftRecord[key] !== rightRecord[key]) {
-      return false;
-    }
-  }
-
-  return true;
-}
-
-export function useRuntimeSnapshotSlice<T>(
-  runtime: RuntimeSnapshotSource | null,
-  fallbackSnapshot: RuntimeRenderSnapshot,
-  selector: (snapshot: RuntimeRenderSnapshot) => T,
-  isEqual: (left: T, right: T) => boolean = Object.is,
-): T {
-  const cachedSelectionRef = useRef<T>(selector(fallbackSnapshot));
-  return useSyncExternalStore(
-    (listener) => runtime?.subscribe(listener) ?? (() => undefined),
-    () => {
-      const next = selector(runtime?.getRenderSnapshot() ?? fallbackSnapshot);
-      if (isEqual(cachedSelectionRef.current, next)) {
-        return cachedSelectionRef.current;
-      }
-      cachedSelectionRef.current = next;
-      return next;
-    },
-    () => {
-      const next = selector(runtime?.getRenderSnapshot() ?? fallbackSnapshot);
-      if (isEqual(cachedSelectionRef.current, next)) {
-        return cachedSelectionRef.current;
-      }
-      cachedSelectionRef.current = next;
-      return next;
-    },
-  );
-}
-
-export function useRuntimeValue<T>(
-  source: RuntimeValueSource<T> | null,
-  fallbackValue: T,
-  isEqual: (left: T, right: T) => boolean = Object.is,
-): T {
-  const cachedValueRef = useRef<T>(fallbackValue);
-  return useSyncExternalStore(
-    (listener) => source?.subscribe(listener) ?? (() => undefined),
-    () => {
-      const next = source?.getValue() ?? fallbackValue;
-      if (isEqual(cachedValueRef.current, next)) {
-        return cachedValueRef.current;
-      }
-      cachedValueRef.current = next;
-      return next;
-    },
-    () => {
-      const next = source?.getValue() ?? fallbackValue;
-      if (isEqual(cachedValueRef.current, next)) {
-        return cachedValueRef.current;
-      }
-      cachedValueRef.current = next;
-      return next;
-    },
-  );
-}

package/src/ui/shared/revision-filters.ts

@@ -1,31 +0,0 @@
-import type { RuntimeRenderSnapshot } from "../../api/public-types";
-
-type Revision = RuntimeRenderSnapshot["trackedChanges"]["revisions"][number];
-type MarkupDisplay = "clean" | "simple" | "all";
-
-export function selectVisibleRevisions(
-  revisions: readonly Revision[],
-  markupDisplay: MarkupDisplay,
-): Revision[] {
-  switch (markupDisplay) {
-    case "clean":
-    case "simple":
-      return revisions.filter(
-        (revision) =>
-          revision.status === "active" && revision.actionability === "actionable",
-      );
-    case "all":
-      return [...revisions];
-  }
-}
-
-export function describeEmptyRevisionState(
-  markupDisplay: MarkupDisplay,
-  totalCount: number,
-): string {
-  if ((markupDisplay === "clean" || markupDisplay === "simple") && totalCount > 0) {
-    return "Simple markup keeps the rail focused on actionable live changes. Switch to All to inspect preserve-only or historical revision records.";
-  }
-
-  return "Runtime-backed change cards will appear here when tracked changes are present.";
-}

package/src/ui/status/README.md

@@ -1,3 +0,0 @@
-# Status UI
-
-Dirty state, autosave state, import/export progress, and validation status surfaces belong here.

package/src/ui/theme/README.md

@@ -1,3 +0,0 @@
-# Theme
-
-Design tokens, CSS variable mapping, and host-theme integration belong here.

package/src/ui/toolbar/README.md

@@ -1,3 +0,0 @@
-# Toolbar
-
-The compact command toolbar and contextual editor controls belong here.

package/src/ui/workflow-surface-blocked-rails.ts

@@ -1,94 +0,0 @@
-import type {
-  EditorStoryTarget,
-  RuntimeRenderSnapshot,
-  SurfaceBlockSnapshot,
-  WorkflowBlockedCommandReason,
-  WorkflowMarkupSnapshot,
-} from "../api/public-types";
-
-export function deriveVisibleWorkflowBlockedRails(
-  surface: RuntimeRenderSnapshot["surface"] | undefined,
-  markupSnapshot: WorkflowMarkupSnapshot | null,
-): WorkflowBlockedCommandReason[] {
-  if (!surface || !markupSnapshot) {
-    return [];
-  }
-
-  const visibleFragments = collectVisibleOpaqueFragmentStoryKeys(surface);
-  return markupSnapshot.opaqueFragments
-    .filter((fragment) =>
-      visibleFragments.has(
-        createOpaqueFragmentStoryKey(fragment.fragmentId, fragment.storyTarget ?? { kind: "main" }),
-      ),
-    )
-    .map((fragment) => ({
-      code: fragment.blockedReasonCode,
-      message: fragment.detail,
-      anchor: fragment.anchor,
-      storyTarget: fragment.storyTarget,
-    }));
-}
-
-function collectVisibleOpaqueFragmentStoryKeys(
-  surface: NonNullable<RuntimeRenderSnapshot["surface"]>,
-): Set<string> {
-  const keys = new Set<string>();
-  collectVisibleOpaqueFragmentStoryKeysInBlocks(surface.blocks, { kind: "main" }, keys);
-  for (const story of surface.secondaryStories) {
-    collectVisibleOpaqueFragmentStoryKeysInBlocks(story.blocks, story.target, keys);
-  }
-  return keys;
-}
-
-function collectVisibleOpaqueFragmentStoryKeysInBlocks(
-  blocks: readonly SurfaceBlockSnapshot[],
-  storyTarget: EditorStoryTarget,
-  keys: Set<string>,
-): void {
-  for (const block of blocks) {
-    if (block.kind === "paragraph") {
-      for (const segment of block.segments) {
-        if (segment.kind === "opaque_inline") {
-          keys.add(createOpaqueFragmentStoryKey(segment.fragmentId, storyTarget));
-        }
-      }
-      continue;
-    }
-
-    if (block.kind === "table") {
-      for (const row of block.rows) {
-        for (const cell of row.cells) {
-          collectVisibleOpaqueFragmentStoryKeysInBlocks(cell.content, storyTarget, keys);
-        }
-      }
-      continue;
-    }
-
-    if (block.kind === "sdt_block") {
-      collectVisibleOpaqueFragmentStoryKeysInBlocks(block.children, storyTarget, keys);
-      continue;
-    }
-
-    keys.add(createOpaqueFragmentStoryKey(block.fragmentId, storyTarget));
-  }
-}
-
-function createOpaqueFragmentStoryKey(
-  fragmentId: string,
-  storyTarget: EditorStoryTarget,
-): string {
-  return `${fragmentId}:${serializeStoryTargetKey(storyTarget)}`;
-}
-
-function serializeStoryTargetKey(storyTarget: EditorStoryTarget): string {
-  switch (storyTarget.kind) {
-    case "main":
-      return "main";
-    case "header":
-    case "footer":
-      return `${storyTarget.kind}:${storyTarget.relationshipId}:${storyTarget.variant}:${storyTarget.sectionIndex ?? "none"}`;
-    case "footnote":
-    case "endnote":
-      return `${storyTarget.kind}:${storyTarget.noteId}`;
-  }
-}

package/src/ui-tailwind/chrome/tw-alert-banner.tsx

@@ -1,64 +0,0 @@
-import React from "react";
-import { AlertTriangle, XCircle } from "lucide-react";
-
-import type { RuntimeRenderSnapshot, WorkflowBlockedCommandReason } from "../../api/public-types";
-
-export interface TwAlertBannerProps {
-  snapshot: RuntimeRenderSnapshot;
-  preserveOnlyCount: number;
-  workflowBlockedReasons?: WorkflowBlockedCommandReason[];
-}
-
-export function TwAlertBanner(props: TwAlertBannerProps) {
-  const { snapshot, preserveOnlyCount, workflowBlockedReasons = [] } = props;
-
-  if (snapshot.fatalError) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs">
-        <XCircle className="h-3.5 w-3.5 shrink-0" />
-        <span>{snapshot.fatalError.message}</span>
-      </div>
-    );
-  }
-
-  if (snapshot.compatibility.blockExport) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-danger-soft text-danger text-xs">
-        <XCircle className="h-3.5 w-3.5 shrink-0" />
-        <span>
-          Export blocked &mdash;{" "}
-          {snapshot.compatibility.blockExportReasons[0] ?? "unsupported content"}
-        </span>
-      </div>
-    );
-  }
-
-  if (preserveOnlyCount > 0) {
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-warning-soft text-comment text-xs">
-        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-        <span>
-          {preserveOnlyCount} preserve-only feature
-          {preserveOnlyCount !== 1 ? "s" : ""} detected
-        </span>
-      </div>
-    );
-  }
-
-  if (workflowBlockedReasons.length > 0) {
-    const firstReason = workflowBlockedReasons[0];
-    return (
-      <div className="flex items-center gap-2 px-3 py-1.5 bg-amber-50 text-amber-700 text-xs">
-        <AlertTriangle className="h-3.5 w-3.5 shrink-0" />
-        <span>
-          {firstReason.message}
-          {workflowBlockedReasons.length > 1
-            ? ` (+${workflowBlockedReasons.length - 1} more)`
-            : ""}
-        </span>
-      </div>
-    );
-  }
-
-  return null;
-}

package/src/ui-tailwind/chrome/tw-image-context-toolbar.tsx

@@ -1,129 +0,0 @@
-import React from "react";
-
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface ActiveImageContext {
-  mediaId: string;
-  display: "inline" | "floating";
-  widthEmu?: number;
-  heightEmu?: number;
-  horizontalOffsetEmu?: number;
-  verticalOffsetEmu?: number;
-}
-
-export interface TwImageContextToolbarProps {
-  activeImage: ActiveImageContext;
-  disabled: boolean;
-  onSetImageLayout?: (
-    mediaId: string,
-    dimensions: { widthEmu: number; heightEmu: number },
-  ) => void;
-  onSetImageFrame?: (
-    mediaId: string,
-    offsets: { horizontalOffsetEmu?: number; verticalOffsetEmu?: number },
-  ) => void;
-}
-
-const IMAGE_SIZE_PRESETS = [
-  { label: "Small image", widthEmu: 1828800, heightEmu: 914400 },
-  { label: "Medium image", widthEmu: 2743200, heightEmu: 1371600 },
-  { label: "Large image", widthEmu: 3657600, heightEmu: 1828800 },
-] as const;
-
-const NUDGE_EMU = 228600;
-
-export function TwImageContextToolbar(props: TwImageContextToolbarProps) {
-  const { activeImage } = props;
-
-  return (
-    <div
-      data-testid="image-context-toolbar"
-      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
-    >
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Image
-      </span>
-      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
-        {activeImage.display}
-      </span>
-      {IMAGE_SIZE_PRESETS.map((preset) => (
-        <ToolbarButton
-          key={preset.label}
-          ariaLabel={preset.label}
-          disabled={props.disabled || !props.onSetImageLayout}
-          onClick={() =>
-            props.onSetImageLayout?.(activeImage.mediaId, {
-              widthEmu: preset.widthEmu,
-              heightEmu: preset.heightEmu,
-            })}
-        >
-          {preset.label.replace(" image", "")}
-        </ToolbarButton>
-      ))}
-      {activeImage.display === "floating" ? (
-        <>
-          <ToolbarButton
-            ariaLabel="Nudge image left"
-            disabled={props.disabled || !props.onSetImageFrame}
-            onClick={() =>
-              props.onSetImageFrame?.(activeImage.mediaId, {
-                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) - NUDGE_EMU,
-              })}
-          >
-            Left
-          </ToolbarButton>
-          <ToolbarButton
-            ariaLabel="Nudge image right"
-            disabled={props.disabled || !props.onSetImageFrame}
-            onClick={() =>
-              props.onSetImageFrame?.(activeImage.mediaId, {
-                horizontalOffsetEmu: (activeImage.horizontalOffsetEmu ?? 0) + NUDGE_EMU,
-              })}
-          >
-            Right
-          </ToolbarButton>
-          <ToolbarButton
-            ariaLabel="Nudge image up"
-            disabled={props.disabled || !props.onSetImageFrame}
-            onClick={() =>
-              props.onSetImageFrame?.(activeImage.mediaId, {
-                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) - NUDGE_EMU,
-              })}
-          >
-            Up
-          </ToolbarButton>
-          <ToolbarButton
-            ariaLabel="Nudge image down"
-            disabled={props.disabled || !props.onSetImageFrame}
-            onClick={() =>
-              props.onSetImageFrame?.(activeImage.mediaId, {
-                verticalOffsetEmu: (activeImage.verticalOffsetEmu ?? 0) + NUDGE_EMU,
-              })}
-          >
-            Down
-          </ToolbarButton>
-        </>
-      ) : null}
-    </div>
-  );
-}
-
-function ToolbarButton(props: {
-  ariaLabel: string;
-  children: React.ReactNode;
-  disabled: boolean;
-  onClick?: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={props.ariaLabel}
-      disabled={props.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={props.onClick}
-      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {props.children}
-    </button>
-  );
-}

package/src/ui-tailwind/chrome/tw-layout-panel.tsx

@@ -1,114 +0,0 @@
-import React from "react";
-
-import type {
-  PageLayoutSnapshot,
-  SectionPageNumberingPatch,
-  SectionBreakType,
-  SectionLayoutPatch,
-} from "../../api/public-types";
-import { preserveEditorSelectionMouseDown } from "../../ui/headless/preserve-editor-selection";
-
-export interface TwLayoutPanelProps {
-  pageLayout: PageLayoutSnapshot;
-  readOnly: boolean;
-  onInsertSectionBreak?: (type: SectionBreakType) => void;
-  onDeleteSectionBreak?: (sectionIndex: number) => void;
-  onUpdateSectionLayout?: (sectionIndex: number, patch: SectionLayoutPatch) => void;
-  onSetSectionPageNumbering?: (
-    sectionIndex: number,
-    patch: SectionPageNumberingPatch | null,
-  ) => void;
-}
-
-export function TwLayoutPanel(props: TwLayoutPanelProps) {
-  const nextOrientation = props.pageLayout.orientation === "portrait" ? "landscape" : "portrait";
-  const titlePageEnabled = props.pageLayout.differentFirstPage;
-
-  return (
-    <div className="mt-3 flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm">
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Section
-      </span>
-      <ToolbarButton
-        ariaLabel="Insert next-page section break"
-        disabled={props.readOnly || !props.onInsertSectionBreak}
-        onClick={() => props.onInsertSectionBreak?.("nextPage")}
-      >
-        Next-page break
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel={`Switch section to ${nextOrientation}`}
-        disabled={props.readOnly || !props.onUpdateSectionLayout}
-        onClick={() =>
-          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
-            pageSize: {
-              orientation: nextOrientation,
-              width: props.pageLayout.pageHeight,
-              height: props.pageLayout.pageWidth,
-            },
-          })}
-      >
-        {nextOrientation === "landscape" ? "Landscape" : "Portrait"}
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Delete current section break"
-        disabled={props.readOnly || props.pageLayout.sectionIndex === 0 || !props.onDeleteSectionBreak}
-        onClick={() => props.onDeleteSectionBreak?.(props.pageLayout.sectionIndex)}
-      >
-        Delete break
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Restart page numbering at 1"
-        disabled={props.readOnly || !props.onSetSectionPageNumbering}
-        onClick={() =>
-          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
-            ...(props.pageLayout.pageNumbering ?? {}),
-            start: 1,
-          })}
-      >
-        Restart numbering
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Use roman page numbering"
-        disabled={props.readOnly || !props.onSetSectionPageNumbering}
-        onClick={() =>
-          props.onSetSectionPageNumbering?.(props.pageLayout.sectionIndex, {
-            ...(props.pageLayout.pageNumbering ?? {}),
-            format: "roman",
-          })}
-      >
-        Roman numerals
-      </ToolbarButton>
-      <ToolbarButton
-        ariaLabel="Toggle different first page"
-        disabled={props.readOnly || !props.onUpdateSectionLayout}
-        onClick={() =>
-          props.onUpdateSectionLayout?.(props.pageLayout.sectionIndex, {
-            titlePage: !titlePageEnabled,
-          })}
-      >
-        {titlePageEnabled ? "Same first page" : "Different first page"}
-      </ToolbarButton>
-    </div>
-  );
-}
-
-function ToolbarButton(props: {
-  ariaLabel: string;
-  children: React.ReactNode;
-  disabled: boolean;
-  onClick?: () => void;
-}) {
-  return (
-    <button
-      type="button"
-      aria-label={props.ariaLabel}
-      disabled={props.disabled}
-      onMouseDown={preserveEditorSelectionMouseDown}
-      onClick={props.onClick}
-      className="inline-flex h-8 items-center rounded-md px-2 text-xs font-medium text-primary transition-colors hover:bg-surface disabled:cursor-not-allowed disabled:opacity-40"
-    >
-      {props.children}
-    </button>
-  );
-}

package/src/ui-tailwind/chrome/tw-object-context-toolbar.tsx

@@ -1,34 +0,0 @@
-import React from "react";
-
-export interface ActiveObjectContext {
-  kind: "textbox" | "shape";
-  display: "inline" | "floating";
-}
-
-export interface TwObjectContextToolbarProps {
-  activeObject: ActiveObjectContext;
-}
-
-export function TwObjectContextToolbar(props: TwObjectContextToolbarProps) {
-  const label = props.activeObject.kind === "textbox" ? "Text box" : "Shape";
-
-  return (
-    <div
-      data-testid="object-context-toolbar"
-      className="flex flex-wrap items-center gap-2 rounded-xl border border-border bg-canvas px-3 py-2 shadow-sm"
-    >
-      <span className="text-[10px] font-semibold uppercase tracking-[0.12em] text-tertiary">
-        Object
-      </span>
-      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
-        {label}
-      </span>
-      <span className="rounded-full bg-surface px-2 py-1 text-[10px] font-medium uppercase tracking-[0.1em] text-secondary">
-        {props.activeObject.display}
-      </span>
-      <span className="text-xs text-secondary">
-        Object selection is active.
-      </span>
-    </div>
-  );
-}