@colixsystems/widget-sdk 0.170.0 → 0.173.1

package/dist/list-view.js

@@ -1,5 +1,5 @@
-// The ONE implementation behind the `<List>`, `<ListRow>` and `<EmptyState>`
-// SDK primitives. The platform bindings (`list.js` / `list.native.js`) differ
+// The ONE implementation behind the `<List>`, `<ListRow>`, `<ListHeader>` and
+// `<EmptyState>` SDK primitives. The platform bindings (`list.js` / `list.native.js`) differ
 // only in where the primitives come from, so the hosts cannot drift.
 //
 // Every widget drawing a list of records used to hand-roll its rows, so two
@@ -10,7 +10,13 @@ import React from "react";
 import { useHostTheme } from "./hooks.js";
 import { DEFAULT_THEME_TOKENS } from "./_theme-tokens.js";
 import { Icon } from "./icon.js";
-import { resolveListTokens, LIST_TOKEN_NAMES } from "./list-tokens.js";
+import {
+  resolveListTokens,
+  listRowFrame,
+  listSideEdgeWidth,
+  LIST_TOKEN_NAMES,
+  LIST_SELECTED_BAR_WIDTH,
+} from "./list-tokens.js";
 import { textRoleStyle } from "./text-roles.js";
 
 // Outside a widget host (a test, a preview) the defaults still paint a row.
@@ -26,15 +32,49 @@ function listOverrides(props) {
   return out;
 }
 
+function soleElement(children) {
+  const parts = React.Children.toArray(children);
+  return parts.length === 1 && React.isValidElement(parts[0]) ? parts[0] : null;
+}
+
+const HORIZONTAL_PADDING = [
+  "padding",
+  "paddingHorizontal",
+  "paddingLeft",
+  "paddingStart",
+  "paddingInline",
+  "paddingInlineStart",
+];
+
 /**
  * Bind the shared list components to one platform's primitives.
  *
- * @param {{View: any, Text: any, Pressable: any}} rn
+ * @param {{View: any, Text: any, Pressable: any, StyleSheet: any}} rn
  */
 export function makeList(rn) {
-  const { View, Text, Pressable } = rn;
+  const { View, Text, Pressable, StyleSheet } = rn;
   const ListContext = React.createContext(null);
 
+  function useRowTokens(props) {
+    const theme = useListTheme();
+    const inherited = React.useContext(ListContext);
+    return [theme, resolveListTokens(theme, { ...inherited, ...listOverrides(props) })];
+  }
+
+  // A lone row View spans the row, as the title block does. Anything
+  // else (cells, a component rendering cells) stays in the row as before.
+  function customBody(children) {
+    const only = soleElement(children);
+    return only && only.type === View
+      ? React.createElement(View, { style: { flex: 1, minWidth: 0 } }, only)
+      : children;
+  }
+
+  function setsOwnInset(style) {
+    const flat = StyleSheet.flatten(style) || {};
+    return HORIZONTAL_PADDING.some((key) => flat[key] !== undefined);
+  }
+
   function List(props) {
     const { children, style, testID } = props;
     const theme = useListTheme();
@@ -72,12 +112,7 @@ export function makeList(rn) {
       testID,
       children,
     } = props;
-    const theme = useListTheme();
-    const inherited = React.useContext(ListContext);
-    const tokens = resolveListTokens(theme, {
-      ...inherited,
-      ...listOverrides(props),
-    });
+    const [theme, tokens] = useRowTokens(props);
     const { colors, spacing, typography } = theme;
 
     const pressable = typeof onPress === "function";
@@ -90,10 +125,8 @@ export function makeList(rn) {
         ? { borderBottomWidth: tokens.dividerWidth, borderColor: tokens.dividerColor }
         : null;
     const rowStyle = {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: spacing.md,
-      paddingHorizontal: tokens.rowPadding,
+      // An inset the widget sets itself is left exactly as it asked.
+      ...listRowFrame(tokens, spacing, selected && !setsOwnInset(style)),
       paddingVertical: tokens.rowPadding,
       // A dense look may shrink a static row, never a tap target.
       minHeight: pressable ? Math.max(tokens.rowMinHeight, 44) : tokens.rowMinHeight,
@@ -104,7 +137,7 @@ export function makeList(rn) {
       ...(selected
         ? {
             backgroundColor: tokens.selectedBackground,
-            borderLeftWidth: 3,
+            borderLeftWidth: LIST_SELECTED_BAR_WIDTH,
             borderLeftColor: tokens.selectedAccent,
           }
         : null),
@@ -112,7 +145,7 @@ export function makeList(rn) {
 
     const body =
       children !== undefined
-        ? children
+        ? customBody(children)
         : React.createElement(
             View,
             { style: { flex: 1, gap: 2 } },
@@ -174,6 +207,39 @@ export function makeList(rn) {
   }
   ListRow.displayName = "ListRow";
 
+  // A table's column labels: a ListRow's frame and body slot with none of its
+  // row chrome, so each label sits over its column.
+  function ListHeader(props) {
+    const { leading, trailing, divider = true, accessibilityLabel, style, testID, children } = props;
+    const [theme, tokens] = useRowTokens(props);
+    const { spacing } = theme;
+    // Transparent side edges stand in for a tile's outline.
+    const side = listSideEdgeWidth(tokens);
+    const headerStyle = {
+      ...listRowFrame(tokens, spacing),
+      paddingVertical: Math.min(tokens.rowPadding, spacing.sm),
+      ...(side > 0
+        ? { borderLeftWidth: side, borderRightWidth: side, borderColor: "transparent" }
+        : null),
+      ...(divider && tokens.dividerWidth > 0
+        ? { borderBottomWidth: tokens.dividerWidth, borderBottomColor: tokens.dividerColor }
+        : null),
+    };
+    return React.createElement(
+      View,
+      {
+        style: [headerStyle, style],
+        testID,
+        accessibilityLabel,
+        accessible: accessibilityLabel ? true : undefined,
+      },
+      leading || null,
+      customBody(children),
+      trailing || null,
+    );
+  }
+  ListHeader.displayName = "ListHeader";
+
   function EmptyState({ icon = "inbox", title, message, children, style, testID }) {
     const { colors, spacing, radii, typography } = useListTheme();
     return React.createElement(
@@ -211,5 +277,5 @@ export function makeList(rn) {
   }
   EmptyState.displayName = "EmptyState";
 
-  return { List, ListRow, EmptyState };
+  return { List, ListRow, ListHeader, EmptyState };
 }

package/dist/list.js

@@ -1,7 +1,7 @@
-// `<List>`, `<ListRow>`, `<EmptyState>` (web). Binds ./list-view.js to
-// react-native-web; see ./primitives.js for why not the bare specifier.
+// `<List>`, `<ListRow>`, `<ListHeader>`, `<EmptyState>` (web). Binds
+// ./list-view.js to react-native-web; see ./primitives.js for why not the bare specifier.
 
 import * as ReactNative from "react-native-web";
 import { makeList } from "./list-view.js";
 
-export const { List, ListRow, EmptyState } = makeList(ReactNative);
+export const { List, ListRow, ListHeader, EmptyState } = makeList(ReactNative);

package/dist/list.native.js

@@ -1,7 +1,7 @@
-// `<List>`, `<ListRow>`, `<EmptyState>` (native). Binds ./list-view.js to
-// React Native's own primitives; only the import differs from ./list.js.
+// `<List>`, `<ListRow>`, `<ListHeader>`, `<EmptyState>` (native). Binds
+// ./list-view.js to React Native's own primitives; only the import differs from ./list.js.
 
-import { View, Text, Pressable } from "react-native";
+import { View, Text, Pressable, StyleSheet } from "react-native";
 import { makeList } from "./list-view.js";
 
-export const { List, ListRow, EmptyState } = makeList({ View, Text, Pressable });
+export const { List, ListRow, ListHeader, EmptyState } = makeList({ View, Text, Pressable, StyleSheet });

package/dist/webbundle.js

@@ -90,12 +90,15 @@ function cssInjectPlugin() {
  *   packer passes the frontend's `node_modules` (where the vetted web packages
  *   are installed per the adding-vetted-packages skill) so the bundle resolves
  *   them no matter the invoking CWD.
+ * @param {boolean} [opts.minify]  minify the output for production serving.
+ *   Off by default so the dev server's bundle stays readable.
  * @returns {Promise<string>} the bundled ESM source.
  */
 export async function bundleWebEntry({
   entryPath,
   external = hostExternalSpecifiers(),
   nodePaths = [],
+  minify = false,
 }) {
   const esbuild = await loadEsbuild();
   const result = await esbuild.build({
@@ -138,6 +141,7 @@ export async function bundleWebEntry({
     // adds extra roots so a packer invoked from the repo root still resolves the
     // vetted web packages installed under frontend/node_modules.
     nodePaths,
+    minify,
     logLevel: "silent",
   });
   const out = result.outputFiles?.[0];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colixsystems/widget-sdk",
-  "version": "0.170.0",
+  "version": "0.173.1",
   "description": "Common widget interface for AppStudio. Implements WidgetManifest, WidgetContext, property schema, and helper hooks.",
   "homepage": "https://github.com/Colix-AB/AppStudio",
   "type": "module",

package/src/webbundle.js

@@ -90,12 +90,15 @@ function cssInjectPlugin() {
  *   packer passes the frontend's `node_modules` (where the vetted web packages
  *   are installed per the adding-vetted-packages skill) so the bundle resolves
  *   them no matter the invoking CWD.
+ * @param {boolean} [opts.minify]  minify the output for production serving.
+ *   Off by default so the dev server's bundle stays readable.
  * @returns {Promise<string>} the bundled ESM source.
  */
 export async function bundleWebEntry({
   entryPath,
   external = hostExternalSpecifiers(),
   nodePaths = [],
+  minify = false,
 }) {
   const esbuild = await loadEsbuild();
   const result = await esbuild.build({
@@ -138,6 +141,7 @@ export async function bundleWebEntry({
     // adds extra roots so a packer invoked from the repo root still resolves the
     // vetted web packages installed under frontend/node_modules.
     nodePaths,
+    minify,
     logLevel: "silent",
   });
   const out = result.outputFiles?.[0];