@cntrl-site/sdk-nextjs 1.9.138 → 1.10.0

package/.idea/codeStyles/codeStyleConfig.xml

@@ -0,0 +1,5 @@
+<component name="ProjectCodeStyleConfiguration">
+  <state>
+    <option name="PREFERRED_PROJECT_CODE_STYLE" value="Default" />
+  </state>
+</component>

package/.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/sdk-nextjs.iml" filepath="$PROJECT_DIR$/.idea/sdk-nextjs.iml" />
+    </modules>
+  </component>
+</project>

package/.idea/sdk-nextjs.iml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="WEB_MODULE" version="4">
+  <component name="NewModuleRootManager">
+    <content url="file://$MODULE_DIR$">
+      <excludeFolder url="file://$MODULE_DIR$/temp" />
+      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
+      <excludeFolder url="file://$MODULE_DIR$/tmp" />
+    </content>
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

package/.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="$PROJECT_DIR$" vcs="Git" />
+  </component>
+</project>

package/lib/components/items/RichTextItem/RichTextItem.js

@@ -22,6 +22,7 @@ const useItemGeometry_1 = require("../../../ItemGeometry/useItemGeometry");
 const RichTextGeometryController_1 = require("../../../ItemGeometry/RichTextGeometryController");
 const RichTextConverter_1 = require("../../../utils/RichTextConverter/RichTextConverter");
 const getHeadingTag_1 = require("../../../utils/getHeadingTag");
+const detectLang_1 = require("../../../utils/detectLang");
 const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
     var _a, _b, _c, _d, _e;
     const reactId = (0, react_1.useId)();
@@ -29,7 +30,8 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     const [ref, setRef] = (0, react_1.useState)(null);
     const { layouts } = (0, useCntrlContext_1.useCntrlContext)();
     const itemAngle = (0, useItemAngle_1.useItemAngle)(item, sectionId);
-    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight, xSizing } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const { blur: itemBlur, wordSpacing: itemWordSpacing, letterSpacing: itemLetterSpacing, color: itemColor, fontSize, lineHeight, xSizing, columns, columnGutter, hyphens } = (0, useRichTextItemValues_1.useRichTextItemValues)(item, sectionId);
+    const columnsEnabled = (columns !== null && columns !== void 0 ? columns : 1) > 1;
     const layoutValues = [item.area, item.layoutParams];
     const exemplary = (0, useExemplary_1.useExemplary)();
     const { layoutId } = (0, useCurrentLayout_1.useCurrentLayout)();
@@ -58,11 +60,16 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
     const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
     const [content, styles] = (0, useRichTextItem_1.useRichTextItem)(item);
     const Wrapper = ((_e = (0, getHeadingTag_1.getHeadingTag)(item)) !== null && _e !== void 0 ? _e : 'div');
+    const lang = (0, react_1.useMemo)(() => (0, detectLang_1.detectLang)(item.commonParams.text), [item.commonParams.text]);
     (0, react_1.useEffect)(() => {
         onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(isInteractive);
     }, [isInteractive, onVisibilityChange]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Wrapper, { ref: setRef, className: `rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RichTextConverter_1.RICH_TEXT_LAYOUT_PENDING_CLASS}`}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Wrapper, { lang: lang, ref: setRef, className: `rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RichTextConverter_1.RICH_TEXT_LAYOUT_PENDING_CLASS}`}`, style: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, (blur !== undefined ? { filter: `blur(${blur * 100}vw)` } : {})), (textColor ? { color: `${textColor.fmt('rgba')}` } : {})), (angle !== undefined ? { transform: `rotate(${angle}deg)` } : {})), (letterSpacing !== undefined ? { letterSpacing: `${letterSpacing * exemplary}px` } : {})), (wordSpacing !== undefined ? { wordSpacing: `${wordSpacing * exemplary}px` } : {})), (fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {})), (lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {})), (columnsEnabled ? { columnCount: columns, columnFill: 'balance' } : {})), (columnsEnabled && columnGutter !== undefined ? { columnGap: `${Math.round(columnGutter * exemplary)}px` } : {})), (hyphens !== undefined ? { hyphens, WebkitHyphens: hyphens } : {})), { willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset', transition }), children: content }), (0, jsx_runtime_1.jsxs)(style_1.default, { id: id, children: [styles, `${(0, sdk_1.getLayoutStyles)(layouts, layoutValues, ([area, layoutParams]) => {
+                        var _a, _b, _c;
                         const color = color_1.CntrlColor.parse(layoutParams.color);
+                        const columns = (_a = layoutParams.columns) !== null && _a !== void 0 ? _a : 1;
+                        const columnsEnabled = columns > 1;
+                        const hyphens = (_b = layoutParams.hyphens) !== null && _b !== void 0 ? _b : sdk_1.Hyphens.None;
                         return (`
             .rich-text-wrapper-${item.id} {
               margin: 0;
@@ -79,6 +86,17 @@ const RichTextItem = ({ item, sectionId, onResize, interactionCtrl, onVisibility
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
+              column-count: ${columnsEnabled ? columns : 'unset'};
+              column-gap: ${columnsEnabled ? `${((_c = layoutParams.columnGutter) !== null && _c !== void 0 ? _c : 0) * 100}vw` : 'unset'};
+              column-fill: ${columnsEnabled ? 'balance' : 'unset'};
+              hyphens: ${hyphens};
+              -webkit-hyphens: ${hyphens};
+              hyphenate-limit-chars: 6 3 2;
+              hyphenate-limit-lines: 2;
+              hyphenate-limit-last: always;
+              hyphenate-limit-zone: 8%;
+              -webkit-hyphenate-limit-before: 3;
+              -webkit-hyphenate-limit-after: 2;
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
             }
             @supports not (color: oklch(42% 0.3 90 / 1)) {

package/lib/components/items/useRichTextItemValues.js

@@ -34,6 +34,9 @@ const useRichTextItemValues = (item, sectionId) => {
     const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
     const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
     const xSizing = layoutId ? item.layoutParams[layoutId].sizing : undefined;
-    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing };
+    const columns = layoutId ? item.layoutParams[layoutId].columns : undefined;
+    const columnGutter = layoutId ? item.layoutParams[layoutId].columnGutter : undefined;
+    const hyphens = layoutId ? item.layoutParams[layoutId].hyphens : undefined;
+    return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing, columns, columnGutter, hyphens };
 };
 exports.useRichTextItemValues = useRichTextItemValues;

package/lib/utils/detectLang.js

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.detectLang = void 0;
+const franc_min_1 = __importDefault(require("franc-min"));
+// Maps the ISO 639-3 codes franc-min can detect to their ISO 639-1
+// equivalent, since `lang` in the browser is conventionally two letters.
+// Codes with no ISO 639-1 equivalent are passed through as-is — a bare
+// ISO 639-3 code is still a valid BCP 47 language tag.
+const ISO_639_3_TO_1 = {
+    arb: 'ar',
+    azj: 'az',
+    bel: 'be',
+    bos: 'bs',
+    bul: 'bg',
+    ces: 'cs',
+    deu: 'de',
+    eng: 'en',
+    fas: 'fa',
+    fra: 'fr',
+    hau: 'ha',
+    hin: 'hi',
+    hrv: 'hr',
+    hun: 'hu',
+    ibo: 'ig',
+    ind: 'id',
+    ita: 'it',
+    jav: 'jv',
+    kaz: 'kk',
+    kin: 'rw',
+    lin: 'ln',
+    mar: 'mr',
+    nep: 'ne',
+    nld: 'nl',
+    nya: 'ny',
+    pol: 'pl',
+    por: 'pt',
+    ron: 'ro',
+    run: 'rn',
+    rus: 'ru',
+    som: 'so',
+    spa: 'es',
+    srp: 'sr',
+    sun: 'su',
+    swe: 'sv',
+    swh: 'sw',
+    tgl: 'tl',
+    tur: 'tr',
+    ukr: 'uk',
+    urd: 'ur',
+    uzn: 'uz',
+    vie: 'vi',
+    yor: 'yo',
+    zlm: 'ms',
+    zul: 'zu'
+};
+// Below this many characters franc-min's own trigram model is unreliable
+// (headings, labels, short captions) — leave `lang` unset so it inherits
+// from the document instead of guessing wrong.
+const MIN_DETECTABLE_LENGTH = 20;
+function detectLang(text) {
+    var _a;
+    if (!text)
+        return undefined;
+    const trimmed = text.trim();
+    if (trimmed.length < MIN_DETECTABLE_LENGTH)
+        return undefined;
+    const code3 = (0, franc_min_1.default)(trimmed, { minLength: MIN_DETECTABLE_LENGTH });
+    if (code3 === 'und')
+        return undefined;
+    return (_a = ISO_639_3_TO_1[code3]) !== null && _a !== void 0 ? _a : code3;
+}
+exports.detectLang = detectLang;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cntrl-site/sdk-nextjs",
-  "version": "1.9.138",
+  "version": "1.10.0",
   "description": "SDK for Next.js",
   "author": "arsen@momdesign.nyc",
   "license": "MIT",
@@ -33,9 +33,10 @@
     "@cntrl-site/color": "^1.0.0",
     "@cntrl-site/components": "^1.0.85",
     "@cntrl-site/effects": "^1.4.2",
-    "@cntrl-site/sdk": "^1.28.9",
+    "@cntrl-site/sdk": "^1.28.10",
     "@types/vimeo__player": "^2.18.0",
     "@vimeo/player": "^2.25.0",
+    "franc-min": "^5.0.0",
     "html-react-parser": "^3.0.1",
     "resize-observer-polyfill": "^1.5.1",
     "styled-jsx": "^5.0.2"

package/src/components/items/RichTextItem/RichTextItem.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useId, useMemo, useState } from 'react';
 import { CntrlColor } from '@cntrl-site/color';
-import { getLayoutStyles, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
+import { getLayoutStyles, Hyphens, RichTextItem as TRichTextItem } from '@cntrl-site/sdk';
 import JSXStyle from 'styled-jsx/style';
 import { ItemProps } from '../Item';
 import { useRichTextItem } from './useRichTextItem';
@@ -16,6 +16,7 @@ import { useItemGeometry } from '../../../ItemGeometry/useItemGeometry';
 import { RichTextGeometryController } from '../../../ItemGeometry/RichTextGeometryController';
 import { RICH_TEXT_LAYOUT_PENDING_CLASS } from '../../../utils/RichTextConverter/RichTextConverter';
 import { getHeadingTag } from '../../../utils/getHeadingTag';
+import { detectLang } from '../../../utils/detectLang';
 
 export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, onResize, interactionCtrl, onVisibilityChange }) => {
   const reactId = useId();
@@ -30,8 +31,12 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
     color: itemColor,
     fontSize,
     lineHeight,
-    xSizing
+    xSizing,
+    columns,
+    columnGutter,
+    hyphens
   } = useRichTextItemValues(item, sectionId);
+  const columnsEnabled = (columns ?? 1) > 1;
   const layoutValues: Record<string, any>[] = [item.area, item.layoutParams];
   const exemplary = useExemplary();
   const { layoutId } = useCurrentLayout();
@@ -59,6 +64,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   const isInteractive = colorAlpha !== 0 || hasVisibleRangeColors;
   const [content, styles] = useRichTextItem(item);
   const Wrapper = (getHeadingTag(item) ?? 'div') as 'div';
+  const lang = useMemo(() => detectLang(item.commonParams.text), [item.commonParams.text]);
   useEffect(() => {
     onVisibilityChange?.(isInteractive);
   }, [isInteractive, onVisibilityChange]);
@@ -66,6 +72,7 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
   return (
     <>
       <Wrapper
+        lang={lang}
         ref={setRef}
         className={`rich-text-wrapper-${item.id}${layoutId ? '' : ` ${RICH_TEXT_LAYOUT_PENDING_CLASS}`}`}
         style={{
@@ -76,6 +83,9 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
           ...(wordSpacing !== undefined ? { wordSpacing: `${wordSpacing as number * exemplary}px` } : {}),
           ...(fontSize !== undefined ? { fontSize: `${Math.round(fontSize * exemplary)}px` } : {}),
           ...(lineHeight !== undefined ? { lineHeight: `${lineHeight * exemplary}px` } : {}),
+          ...(columnsEnabled ? { columnCount: columns, columnFill: 'balance' as const } : {}),
+          ...(columnsEnabled && columnGutter !== undefined ? { columnGap: `${Math.round(columnGutter * exemplary)}px` } : {}),
+          ...(hyphens !== undefined ? { hyphens, WebkitHyphens: hyphens } : {}),
           willChange: blur !== 0 && blur !== undefined ? 'transform' : 'unset',
           transition
         }}
@@ -86,6 +96,9 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
         {styles}
         {`${getLayoutStyles(layouts, layoutValues, ([area, layoutParams]) => {
           const color = CntrlColor.parse(layoutParams.color);
+          const columns = layoutParams.columns ?? 1;
+          const columnsEnabled = columns > 1;
+          const hyphens = layoutParams.hyphens ?? Hyphens.None;
           return (`
             .rich-text-wrapper-${item.id} {
               margin: 0;
@@ -102,6 +115,17 @@ export const RichTextItem: FC<ItemProps<TRichTextItem>> = ({ item, sectionId, on
               transform: rotate(${area.angle}deg);
               filter: ${layoutParams.blur !== 0 ? `blur(${layoutParams.blur * 100}vw)` : 'unset'};
               text-transform: ${layoutParams.textTransform};
+              column-count: ${columnsEnabled ? columns : 'unset'};
+              column-gap: ${columnsEnabled ? `${(layoutParams.columnGutter ?? 0) * 100}vw` : 'unset'};
+              column-fill: ${columnsEnabled ? 'balance' : 'unset'};
+              hyphens: ${hyphens};
+              -webkit-hyphens: ${hyphens};
+              hyphenate-limit-chars: 6 3 2;
+              hyphenate-limit-lines: 2;
+              hyphenate-limit-last: always;
+              hyphenate-limit-zone: 8%;
+              -webkit-hyphenate-limit-before: 3;
+              -webkit-hyphenate-limit-after: 2;
               ${layoutParams.blur !== 0 ? 'will-change: transform;' : ''}
             }
             @supports not (color: oklch(42% 0.3 90 / 1)) {

package/src/components/items/useRichTextItemValues.ts

@@ -61,6 +61,9 @@ export const useRichTextItemValues = (item: RichTextItem, sectionId: string) =>
   const fontSize = layoutId ? item.layoutParams[layoutId].fontSize : undefined;
   const lineHeight = layoutId ? item.layoutParams[layoutId].lineHeight : undefined;
   const xSizing = layoutId ? item.layoutParams[layoutId].sizing : undefined;
+  const columns = layoutId ? item.layoutParams[layoutId].columns : undefined;
+  const columnGutter = layoutId ? item.layoutParams[layoutId].columnGutter : undefined;
+  const hyphens = layoutId ? item.layoutParams[layoutId].hyphens : undefined;
 
-  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing };
+  return { blur, letterSpacing, wordSpacing, color, fontSize, lineHeight, xSizing, columns, columnGutter, hyphens };
 };

package/src/types/components-utils.d.ts

@@ -5,3 +5,8 @@ declare module '@cntrl-site/components/utils' {
   export function getPositionStyles(position: any): Record<string, any>;
   export function getImageRect(rect: any): Record<string, any>;
 }
+
+declare module 'franc-min' {
+  function franc(text: string, options?: { minLength?: number; only?: string[]; blacklist?: string[] }): string;
+  export = franc;
+}

package/src/utils/detectLang.ts

@@ -0,0 +1,67 @@
+import franc from 'franc-min';
+
+// Maps the ISO 639-3 codes franc-min can detect to their ISO 639-1
+// equivalent, since `lang` in the browser is conventionally two letters.
+// Codes with no ISO 639-1 equivalent are passed through as-is — a bare
+// ISO 639-3 code is still a valid BCP 47 language tag.
+const ISO_639_3_TO_1: Record<string, string> = {
+  arb: 'ar',
+  azj: 'az',
+  bel: 'be',
+  bos: 'bs',
+  bul: 'bg',
+  ces: 'cs',
+  deu: 'de',
+  eng: 'en',
+  fas: 'fa',
+  fra: 'fr',
+  hau: 'ha',
+  hin: 'hi',
+  hrv: 'hr',
+  hun: 'hu',
+  ibo: 'ig',
+  ind: 'id',
+  ita: 'it',
+  jav: 'jv',
+  kaz: 'kk',
+  kin: 'rw',
+  lin: 'ln',
+  mar: 'mr',
+  nep: 'ne',
+  nld: 'nl',
+  nya: 'ny',
+  pol: 'pl',
+  por: 'pt',
+  ron: 'ro',
+  run: 'rn',
+  rus: 'ru',
+  som: 'so',
+  spa: 'es',
+  srp: 'sr',
+  sun: 'su',
+  swe: 'sv',
+  swh: 'sw',
+  tgl: 'tl',
+  tur: 'tr',
+  ukr: 'uk',
+  urd: 'ur',
+  uzn: 'uz',
+  vie: 'vi',
+  yor: 'yo',
+  zlm: 'ms',
+  zul: 'zu'
+};
+
+// Below this many characters franc-min's own trigram model is unreliable
+// (headings, labels, short captions) — leave `lang` unset so it inherits
+// from the document instead of guessing wrong.
+const MIN_DETECTABLE_LENGTH = 20;
+
+export function detectLang(text: string | undefined): string | undefined {
+  if (!text) return undefined;
+  const trimmed = text.trim();
+  if (trimmed.length < MIN_DETECTABLE_LENGTH) return undefined;
+  const code3 = franc(trimmed, { minLength: MIN_DETECTABLE_LENGTH });
+  if (code3 === 'und') return undefined;
+  return ISO_639_3_TO_1[code3] ?? code3;
+}