@astronox/core 0.5.4 → 0.5.6

package/src/patterns/Table/TableCell.astro

@@ -11,7 +11,8 @@ type Props = {
 };
 
 const { cell, rowHref, truncate = false, wrap = false }: Props = Astro.props;
-const tooltip = cell?.tooltip?.trim();
+const tooltip =
+  typeof cell?.tooltip === 'string' ? cell.tooltip.trim() : cell?.tooltip;
 const layout =
   cell?.kind === 'text' || cell?.kind === 'link' ? cell.layout : undefined;
 
@@ -37,6 +38,7 @@ const rootAttributes = cell
         <div {...rootAttributes}>
           <TableCellValue
             cell={cell}
+            interactive={false}
             rowHref={rowHref}
             truncate={truncate}
             wrap={wrap}

package/src/patterns/Table/TableCellValue.astro

@@ -10,12 +10,19 @@ import Button from '../../components/actions/Button/Button.astro';
 
 type Props = {
   cell: TableCell;
+  interactive?: boolean;
   rowHref?: string;
   truncate?: boolean;
   wrap: boolean;
 };
 
-const { cell, rowHref, truncate = false, wrap }: Props = Astro.props;
+const {
+  cell,
+  interactive = true,
+  rowHref,
+  truncate = false,
+  wrap,
+}: Props = Astro.props;
 
 const formatValue = (value: DisplayTextValue): string => String(value);
 ---
@@ -28,6 +35,7 @@ const formatValue = (value: DisplayTextValue): string => String(value);
       primarySize={cell.primarySize}
       primaryWeight={cell.primaryWeight ?? 'regular'}
       secondary={cell.description}
+      interactiveSecondary={interactive}
       secondaryWeight={cell.secondaryWeight}
       layout={cell.layout}
       truncate={truncate}
@@ -48,6 +56,7 @@ const formatValue = (value: DisplayTextValue): string => String(value);
         primarySize={cell.primarySize}
         primaryWeight={cell.primaryWeight}
         secondary={cell.description}
+        interactiveSecondary={false}
         secondaryWeight={cell.secondaryWeight}
         layout={cell.layout}
         truncate={truncate}

package/src/patterns/index.ts

@@ -10,6 +10,10 @@ export { default as Modal } from './Modal/Modal.astro';
 export { default as ModalClose } from './Modal/ModalClose.astro';
 export { default as ModalOpen } from './Modal/ModalOpen.astro';
 export { default as PuzzleGrid } from './PuzzleGrid/PuzzleGrid.astro';
+export { default as SlidingPuzzle } from './SlidingPuzzle/SlidingPuzzle.astro';
+export * from './SlidingPuzzle/contracts';
+export * from './SlidingPuzzle/simulation';
+export * from './SlidingPuzzle/slidingPuzzleController';
 export { default as SpriteProjectilePreview } from './SpriteProjectilePreview/SpriteProjectilePreview.astro';
 export { default as StageFlow } from './StageFlow/StageFlow.astro';
 export { default as Table } from './Table/Table.astro';

package/src/primitives/text/TextBlock/TextBlock.astro

@@ -1,11 +1,13 @@
 ---
 import type { HTMLAttributes } from 'astro/types';
 import type { Tone } from '../../../theme/contracts';
+import type { DisplayAnnotatedText } from '../../../display/annotatedText';
+import AnnotatedText from '../../../components/content/AnnotatedText/AnnotatedText.astro';
 
 type Props = HTMLAttributes<'p'> & {
   'data-tone'?: Tone;
   preserveBreaks?: boolean;
-  text: string;
+  text: string | DisplayAnnotatedText;
 };
 
 const {
@@ -15,7 +17,49 @@ const {
   text,
   ...attrs
 }: Props = Astro.props;
-const paragraphs = preserveBreaks ? text.split(/\r?\n(?:[ \t]*\r?\n)+/) : [];
+function splitParagraphs(
+  content: DisplayAnnotatedText,
+): DisplayAnnotatedText[] {
+  const text = content.map((span) => span.text).join('');
+  const result: DisplayAnnotatedText[] = [];
+  let spanIndex = 0;
+  let spanStart = 0;
+
+  // Slice the original annotations using offsets in the complete text. Paragraph
+  // separators may cross span boundaries, including between CR and LF.
+  const slice = (start: number, end: number): DisplayAnnotatedText => {
+    const spans: Array<DisplayAnnotatedText[number]> = [];
+    while (spanIndex < content.length && spanStart < end) {
+      const span = content[spanIndex]!;
+      const spanEnd = spanStart + span.text.length;
+      const from = Math.max(start, spanStart);
+      const to = Math.min(end, spanEnd);
+      if (from < to) {
+        spans.push({
+          ...span,
+          text: span.text.slice(from - spanStart, to - spanStart),
+        });
+      }
+      if (spanEnd > end) break;
+      spanStart = spanEnd;
+      spanIndex += 1;
+    }
+    return spans;
+  };
+
+  let start = 0;
+  for (const separator of text.matchAll(/\r?\n(?:[ \t]*\r?\n)+/g)) {
+    result.push(slice(start, separator.index));
+    start = separator.index + separator[0].length;
+  }
+  result.push(slice(start, text.length));
+  return result;
+}
+const paragraphs = !preserveBreaks
+  ? []
+  : typeof text === 'string'
+    ? text.split(/\r?\n(?:[ \t]*\r?\n)+/)
+    : splitParagraphs(text);
 ---
 
 {
@@ -28,7 +72,13 @@ const paragraphs = preserveBreaks ? text.split(/\r?\n(?:[ \t]*\r?\n)+/) : [];
       data-tone={dataTone}
     >
       {paragraphs.map((paragraph) => (
-        <p class="text-block__paragraph">{paragraph}</p>
+        <p class="text-block__paragraph">
+          {typeof paragraph === 'string' ? (
+            paragraph
+          ) : (
+            <AnnotatedText content={paragraph} />
+          )}
+        </p>
       ))}
     </div>
   ) : (
@@ -38,7 +88,7 @@ const paragraphs = preserveBreaks ? text.split(/\r?\n(?:[ \t]*\r?\n)+/) : [];
       data-widget="text-block"
       data-tone={dataTone}
     >
-      {text}
+      {typeof text === 'string' ? text : <AnnotatedText content={text} />}
     </p>
   )
 }

package/src/styles/style.css

@@ -28,6 +28,8 @@
 @import '../components/content/CardLink/CardLink.css' layer(components);
 @import '../components/content/InlineDefinition/InlineDefinition.css'
   layer(components);
+@import '../components/content/AnnotatedText/AnnotatedText.css'
+  layer(components);
 @import '../components/content/MarkdownContent/MarkdownContent.css'
   layer(components);
 @import '../components/data-display/BadgeList/BadgeList.css' layer(components);
@@ -61,6 +63,8 @@
 @import '../components/navigation/DesktopNavigation.css' layer(patterns);
 @import '../components/navigation/MobileNavigation.css' layer(patterns);
 @import '../patterns/PuzzleGrid/PuzzleGrid.css' layer(patterns);
+@import '../patterns/PuzzleGrid/movement.css' layer(patterns);
+@import '../patterns/SlidingPuzzle/SlidingPuzzle.css' layer(patterns);
 @import '../patterns/CircuitPuzzle/CircuitPuzzle.css' layer(patterns);
 @import '../patterns/Combobox/Combobox.css' layer(patterns);
 @import '../patterns/Dropdown/Dropdown.css' layer(patterns);