@se-studio/core-ui 1.19.9 → 1.20.0

package/dist/utils/reactNodeText.js

@@ -0,0 +1,43 @@
+import { Children, isValidElement } from 'react';
+const DEFAULT_MAX_DEPTH = 8;
+/**
+ * Recursively extract visible text from React children (strings, numbers, nested elements).
+ * Used by TrackedLink when CMS/RTF does not pass an explicit `linkText`.
+ */
+export function extractTextFromReactNode(node, maxDepth = DEFAULT_MAX_DEPTH) {
+    const parts = [];
+    walk(node, parts, 0, maxDepth);
+    return parts.join('').replace(/\s+/g, ' ').trim();
+}
+function walk(node, parts, depth, maxDepth) {
+    if (node == null || typeof node === 'boolean' || depth > maxDepth) {
+        return;
+    }
+    if (typeof node === 'string' || typeof node === 'number') {
+        parts.push(String(node));
+        return;
+    }
+    if (Array.isArray(node)) {
+        for (const child of node) {
+            walk(child, parts, depth, maxDepth);
+        }
+        return;
+    }
+    if (isValidElement(node)) {
+        const props = node.props;
+        if (props?.children != null) {
+            walk(props.children, parts, depth + 1, maxDepth);
+        }
+        return;
+    }
+    // Iterable children (e.g. some Fragment edge cases)
+    try {
+        Children.forEach(node, (child) => {
+            walk(child, parts, depth + 1, maxDepth);
+        });
+    }
+    catch {
+        // ignore non-children values
+    }
+}
+//# sourceMappingURL=reactNodeText.js.map

package/dist/utils/reactNodeText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reactNodeText.js","sourceRoot":"","sources":["../../src/utils/reactNodeText.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,cAAc,EAAkB,MAAM,OAAO,CAAC;AAEjE,MAAM,iBAAiB,GAAG,CAAC,CAAC;AAE5B;;;GAGG;AACH,MAAM,UAAU,wBAAwB,CACtC,IAAe,EACf,WAAmB,iBAAiB;IAEpC,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,QAAQ,CAAC,CAAC;IAC/B,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AACpD,CAAC;AAED,SAAS,IAAI,CAAC,IAAe,EAAE,KAAe,EAAE,KAAa,EAAE,QAAgB;IAC7E,IAAI,IAAI,IAAI,IAAI,IAAI,OAAO,IAAI,KAAK,SAAS,IAAI,KAAK,GAAG,QAAQ,EAAE,CAAC;QAClE,OAAO;IACT,CAAC;IAED,IAAI,OAAO,IAAI,KAAK,QAAQ,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QACzD,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC;QACzB,OAAO;IACT,CAAC;IAED,IAAI,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;QACxB,KAAK,MAAM,KAAK,IAAI,IAAI,EAAE,CAAC;YACzB,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC;QACtC,CAAC;QACD,OAAO;IACT,CAAC;IAED,IAAI,cAAc,CAAC,IAAI,CAAC,EAAE,CAAC;QACzB,MAAM,KAAK,GAAG,IAAI,CAAC,KAAiC,CAAC;QACrD,IAAI,KAAK,EAAE,QAAQ,IAAI,IAAI,EAAE,CAAC;YAC5B,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;QACnD,CAAC;QACD,OAAO;IACT,CAAC;IAED,oDAAoD;IACpD,IAAI,CAAC;QACH,QAAQ,CAAC,OAAO,CAAC,IAAiB,EAAE,CAAC,KAAK,EAAE,EAAE;YAC5C,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,KAAK,GAAG,CAAC,EAAE,QAAQ,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC;IAAC,MAAM,CAAC;QACP,6BAA6B;IAC/B,CAAC;AACH,CAAC"}

package/dist/utils/richTextNodeText.d.ts

@@ -0,0 +1,13 @@
+import type { Block, Inline, Text } from '@contentful/rich-text-types';
+type RichTextLikeNode = Block | Inline | Text | {
+    nodeType?: string;
+    value?: string;
+    content?: unknown[];
+};
+/**
+ * Flatten plain text from a Contentful rich-text node (hyperlink, paragraph, etc.).
+ * Concatenates all `text` node values under `content`, ignoring marks and nested structure.
+ */
+export declare function extractRichTextNodeText(node: RichTextLikeNode | null | undefined): string;
+export {};
+//# sourceMappingURL=richTextNodeText.d.ts.map

package/dist/utils/richTextNodeText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"richTextNodeText.d.ts","sourceRoot":"","sources":["../../src/utils/richTextNodeText.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,6BAA6B,CAAC;AAEvE,KAAK,gBAAgB,GACjB,KAAK,GACL,MAAM,GACN,IAAI,GACJ;IAAE,QAAQ,CAAC,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,EAAE,CAAA;CAAE,CAAC;AAE/D;;;GAGG;AACH,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,gBAAgB,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAUzF"}

package/dist/utils/richTextNodeText.js

@@ -0,0 +1,29 @@
+/**
+ * Flatten plain text from a Contentful rich-text node (hyperlink, paragraph, etc.).
+ * Concatenates all `text` node values under `content`, ignoring marks and nested structure.
+ */
+export function extractRichTextNodeText(node) {
+    if (!node)
+        return '';
+    if (typeof node.value === 'string' && node.nodeType === 'text') {
+        return (node.value ?? '').trim();
+    }
+    const parts = [];
+    walk(node, parts);
+    return parts.join('').replace(/\s+/g, ' ').trim();
+}
+function walk(node, parts) {
+    if (!node || typeof node !== 'object')
+        return;
+    if (node.nodeType === 'text' && typeof node.value === 'string') {
+        parts.push(node.value);
+        return;
+    }
+    const content = node.content;
+    if (!Array.isArray(content))
+        return;
+    for (const child of content) {
+        walk(child, parts);
+    }
+}
+//# sourceMappingURL=richTextNodeText.js.map

package/dist/utils/richTextNodeText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"richTextNodeText.js","sourceRoot":"","sources":["../../src/utils/richTextNodeText.ts"],"names":[],"mappings":"AAQA;;;GAGG;AACH,MAAM,UAAU,uBAAuB,CAAC,IAAyC;IAC/E,IAAI,CAAC,IAAI;QAAE,OAAO,EAAE,CAAC;IAErB,IAAI,OAAQ,IAAa,CAAC,KAAK,KAAK,QAAQ,IAAK,IAAa,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;QACnF,OAAO,CAAE,IAAa,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC;IAC7C,CAAC;IAED,MAAM,KAAK,GAAa,EAAE,CAAC;IAC3B,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;IAClB,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AACpD,CAAC;AAED,SAAS,IAAI,CAAC,IAAsB,EAAE,KAAe;IACnD,IAAI,CAAC,IAAI,IAAI,OAAO,IAAI,KAAK,QAAQ;QAAE,OAAO;IAE9C,IAAK,IAAa,CAAC,QAAQ,KAAK,MAAM,IAAI,OAAQ,IAAa,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC;QACnF,KAAK,CAAC,IAAI,CAAE,IAAa,CAAC,KAAK,CAAC,CAAC;QACjC,OAAO;IACT,CAAC;IAED,MAAM,OAAO,GAAI,IAAuB,CAAC,OAAO,CAAC;IACjD,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC;QAAE,OAAO;IAEpC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;QAC5B,IAAI,CAAC,KAAyB,EAAE,KAAK,CAAC,CAAC;IACzC,CAAC;AACH,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@se-studio/core-ui",
-  "version": "1.19.9",
+  "version": "1.20.0",
   "description": "Shared React UI component library with Tailwind CSS v4 for SE Studio applications",
   "repository": {
     "type": "git",

package/src/showcase/README.md

@@ -130,6 +130,136 @@ To add a CMS Showcase to a project:
    };
    ```
 
+## Query parameters
+
+| Param | Effect |
+|-------|--------|
+| `type` | Component or collection type name |
+| `mode` | `component` (default) or `collection` |
+| `view` | `single` (default) or `all` |
+| `controls` | `true` opens the controls panel on load (closed by default) |
+| `clean` | `true` uses default control state only (no registration/curated mocks) |
+| `debug` | `true` / `1` shows developer chrome (e.g. “fixed frame” labels on viewport layouts) |
+| control keys | e.g. `heading`, `body`, `showVisual`, `backgroundColour` — override mock defaults |
+
+Example: `/cms/showcase?type=Feature+Split&controls=true`
+
+### Wiring `build*Maps` after this release
+
+`buildComponentMaps` / `buildCollectionMaps` now also return:
+
+- `componentShowcaseLayoutMap`
+- `collectionShowcaseLayoutMap`
+
+Existing destructures that only pick known keys keep working. To honour registration `showcaseLayout`, pass the maps into `ShowcasePage`:
+
+```ts
+const {
+  componentMap,
+  componentFieldsMap,
+  componentMockMap,
+  componentShowcaseLayoutMap,
+  excludedComponents,
+  // ...
+} = buildComponentMaps(componentRegistrations);
+
+const {
+  collectionMap,
+  collectionFieldsMap,
+  collectionMockMap,
+  collectionCardMockMap,
+  collectionCardFieldsMap,
+  collectionShowcaseLayoutMap,
+  excludedCollections,
+} = buildCollectionMaps(collectionRegistrations);
+
+// Showcase page:
+<ShowcasePage
+  componentShowcaseLayoutMap={componentShowcaseLayoutMap}
+  collectionShowcaseLayoutMap={collectionShowcaseLayoutMap}
+  ...
+/>
+```
+
+If you omit the maps, layout defaults to `document` (auto-height) for every type.
+
+## Controls support mapping
+
+The sidebar maps control keys to CMS `usedFields` (e.g. `showVisual` → `visual` / `backgroundVisual`, `showLinks` → `links`). Registration mocks may use plain string `body` / `additionalCopy`; the mock factory converts them to rich text. When a type uses `visual` but the mock has no image URL, a placehold.co placeholder is generated.
+
+**Video URLs:** curated `visual.url` values that point at Vimeo/YouTube pages are turned into **External video** visuals (not `next/image` Pictures). Prefer image CDN URLs for posters; use video page URLs only for video modules.
+
+## Iframe height behaviour
+
+Render iframes report content height via `postMessage` from `#showcase-measure-root` so short components shrink below the initial frame size. Single previews cap at 900px. Viewport-unit heroes (`svh` / `70vh` / inline `100svh` styles) are capped inside the iframe by `ShowcaseViewportGuard` so All-view and full-screen collections cannot explode to multi-megapixel heights. Production pages are unaffected.
+
+### `showcaseLayout` on registrations
+
+```ts
+defineComponent({
+  name: 'Dynamic hero',
+  showcaseLayout: 'compact', // document | viewport | compact
+  // ...
+});
+defineCollection({
+  name: 'Full Screen Slides',
+  showcaseLayout: 'viewport',
+  // ...
+});
+```
+
+| Mode | Parent iframe |
+|------|----------------|
+| `document` (default) | Auto-grow to content height |
+| `viewport` | Fixed frame (~640 mobile / ~720 desktop) + internal scroll |
+| `compact` | Shorter fixed frame (~400 / ~480) for full-bleed heroes |
+
+Pass maps from `buildComponentMaps` / `buildCollectionMaps` into `ShowcasePage`:
+
+```ts
+const { componentShowcaseLayoutMap, ... } = buildComponentMaps(...);
+const { collectionShowcaseLayoutMap, ... } = buildCollectionMaps(...);
+
+<ShowcasePage
+  componentShowcaseLayoutMap={componentShowcaseLayoutMap}
+  collectionShowcaseLayoutMap={collectionShowcaseLayoutMap}
+  ...
+/>
+```
+
+**Prefer component-level compact UIs** when `isCmsShowcase(contentContext)` is true (e.g. stack Full Screen Slides cards instead of sticky `100svh` scroll). The layout flag only controls the outer frame.
+
+### Related articles / people collections
+
+Types that call `fetchHelpers.getRelatedArticles` / `getRelatedPeople` will get **empty lists** from showcase mock `contents` (those are mock components, not CMS link entries). Use:
+
+```ts
+import {
+  isCmsShowcase,
+  articlesFromShowcaseContents,
+  peopleFromShowcaseContents,
+} from '@se-studio/core-ui';
+
+const articles =
+  result.data.length > 0
+    ? result.data
+    : isCmsShowcase(contentContext)
+      ? articlesFromShowcaseContents(information)
+      : result.data;
+// articles is IArticleLink[] — type: 'Internal link', internalType: 'Article',
+// with title, href, visuals[], lastModified, etc. suitable for CoreNewsCard-style UIs.
+```
+
+Keep `cardUsedFields` broad enough that mock factory does not strip `heading` / `visual` from card mocks.
+
+### Page-context components
+
+Components that read `contentContext.pageContext.article` (e.g. poster download blocks) render nothing in showcase unless the site provides a showcase stub when `isCmsShowcase()`. Alternatively set `showcaseExclude: true`.
+
+### View transitions on cms-dev
+
+If the site uses `next-view-transitions` / `useTransitionRouter` on public routes, wrap **`(cms-dev)`** layout with `<ViewTransitions>` as well, or showcase collections that use those links will crash.
+
 ## Scroll-gated animations
 
 Some projects pause entrance animations until `ClientMonitor` sets `data-seen` on `[data-component]` sections (e.g. `animate-when-seen` + `animate-text-in`). Showcase routes under `/cms/*` do not mount `ClientMonitor`.