@morit/cli 1.5.0 → 1.6.0

package/assets/plugin_contract.json

@@ -1,5 +1,5 @@
 {
-  "sdk_version": "1.7.13",
+  "sdk_version": "1.7.14",
   "manifest_schema_versions": [1, 2],
   "recommended_schema_version": 2,
   "package_content_type": "application/vnd.morit.plugin+zip",
@@ -198,6 +198,46 @@
     "empty"
   ],
   "ui_runtime": {
+    "common_props": ["alignment", "aspect_ratio", "background_color", "border_color", "border_radius", "border_width", "clip", "disabled_background_color", "elevation", "enabled", "exclude_semantics", "foreground_color", "gradient_colors", "height", "margin", "max_height", "max_width", "min_height", "min_width", "opacity", "padding", "selected", "selected_background_color", "selected_foreground_color", "semantic_label", "tooltip", "width"],
+    "common_props_excluded_components": ["positioned"],
+    "component_props": {
+      "column": ["cross_axis_alignment", "main_axis_alignment", "main_axis_size", "spacing"],
+      "row": ["cross_axis_alignment", "main_axis_alignment", "main_axis_size", "spacing", "stack_at"],
+      "wrap": ["spacing"],
+      "grid": ["columns", "empty_text", "item_height", "item_key", "limit", "min_item_width", "page_size", "page_state_key", "source", "spacing"],
+      "stack": [],
+      "positioned": ["bottom", "height", "left", "padding", "right", "tooltip", "top", "width"],
+      "scroll": ["scroll_direction"],
+      "padding": [],
+      "center": [],
+      "expanded": ["flex"],
+      "surface": ["color", "pressed_color", "spacing"],
+      "card": ["color", "icon", "pressed_color", "spacing", "subtitle", "title", "tone"],
+      "section": ["icon", "spacing", "subtitle", "title"],
+      "text": ["align", "color", "font_size", "font_weight", "line_height", "max_lines", "style", "text"],
+      "icon": ["color", "icon", "size", "tone"],
+      "image": ["asset", "fit", "url"],
+      "avatar": ["asset", "fit", "size", "url"],
+      "badge": ["label"],
+      "divider": [],
+      "spacer": ["size"],
+      "button": ["full_width", "icon", "label", "style"],
+      "chip": ["icon", "label"],
+      "metric": ["icon", "label", "supporting", "tone", "value"],
+      "progress": ["label", "value"],
+      "list": ["dense", "empty_text", "item_key", "limit", "min_item_width", "page_size", "page_state_key", "scroll_direction", "source", "spacing"],
+      "timeline": ["dense", "empty_text", "item_key", "limit", "source"],
+      "calendar": ["date_key", "persist", "source", "state_key", "title", "title_key"],
+      "chart": ["chart_type", "show_legend", "source", "title", "x_key", "y_key"],
+      "table": ["columns", "source", "title"],
+      "form": ["spacing", "submit_label"],
+      "dialog": ["icon", "label", "title"],
+      "sheet": ["icon", "label", "title"],
+      "field": ["error_text", "input_type", "label", "max_length", "max_lines", "maximum", "min_length", "minimum", "persist", "placeholder", "required", "state_key", "suggestions", "suggestions_source"],
+      "select": ["error_text", "label", "options", "options_source", "persist", "required", "searchable", "state_key"],
+      "switch": ["error_text", "label", "persist", "required", "state_key", "supporting"],
+      "empty": ["icon", "supporting", "text", "title"]
+    },
     "schema_version": 2,
     "config_fields": [
       "ui_schema",
@@ -210,7 +250,8 @@
       "initial_state",
       "data_sources",
       "a2ui",
-      "view"
+      "view",
+      "bottom_bar"
     ],
     "node_fields": ["id", "type", "props", "children", "action", "visible_when"],
     "prop_fields": [
@@ -294,7 +335,10 @@
       ,"searchable"
       ,"options_source"
       ,"submit_label",
-      "gradient_colors", "item_key", "font_size", "font_weight", "line_height", "selected_background_color", "selected_foreground_color", "disabled_background_color", "pressed_color"
+      "gradient_colors", "item_key", "font_size", "font_weight", "line_height", "selected_background_color", "selected_foreground_color", "disabled_background_color", "pressed_color",
+      "page_size",
+      "page_state_key",
+      "item_height"
     ],
     "app_bar_fields": ["title", "subtitle", "center_title", "pinned", "leading", "actions"],
     "navigation_fields": ["type", "items", "selected_state_key", "persist", "label_behavior", "rail_breakpoint"],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@morit/cli",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Official Morit Developer CLI for Cloud Projects, validation, builds, and deployments",
   "type": "module",
   "bin": {

package/src/preview.js

@@ -99,6 +99,9 @@ function nodeHtml(node) {
   }
   if (type === "switch") return '<label class="ui-switch"' + attributes + '><input type="checkbox" data-state-key="' + escape(props.state_key) + '"' + (props.required ? " required" : "") + "> " + label + "</label>";
   if (type === "empty") return '<div class="ui-empty"><strong>' + escape(props.title || "표시할 내용이 없어요.") + "</strong><p>" + escape(props.supporting) + "</p></div>";
+  if (["list", "grid"].includes(type) && props.source) {
+    return '<section class="ui-collection" data-collection="' + jsonAttribute(node) + '"><div class="collection-items"></div><nav class="collection-pages"></nav></section>';
+  }
   if (["list", "timeline", "calendar", "chart", "table"].includes(type)) {
     return '<section class="ui-collection"><small>' + escape(type + (props.source ? " · " + props.source : "")) + "</small>" + (children || '<p>' + escape(props.empty_text || "데이터가 연결되면 표시됩니다.") + "</p>") + "</section>";
   }
@@ -198,6 +201,35 @@ function previewRuntime() {
     }
 
     function update() {
+      for (const collection of article.querySelectorAll('[data-collection]')) {
+        const node = JSON.parse(collection.dataset.collection);
+        const props = node.props || {};
+        const values = resolvePreviewPath(roots(), props.source);
+        const rows = Array.isArray(values) ? values.slice(0, props.page_size ? 10000 : (props.limit || 20)) : [];
+        const size = props.page_size || Math.max(rows.length, 1);
+        const pages = Math.max(1, Math.ceil(rows.length / size));
+        const page = Math.max(0, Math.min(pages - 1, Number(state[props.page_state_key]) || 0));
+        const content = collection.querySelector('.collection-items');
+        const pageRows = rows.slice(page * size, (page + 1) * size);
+        const signature = JSON.stringify([pageRows, state]);
+        if (collection._signature !== signature) {
+          collection._signature = signature;
+          content.innerHTML = pageRows.length ? pageRows.map(item => nodeHtml(resolvePreviewValue(node.children[0], { ...roots(), item }))).join('') : '<p>' + escape(props.empty_text || '표시할 내용이 없어요.') + '</p>';
+        }
+        content.style.display = 'grid'; content.style.gap = (props.spacing || 12) + 'px';
+        content.style.gridTemplateColumns = node.type === 'grid' ? 'repeat(auto-fit,minmax(min(100%,' + (props.min_item_width || 148) + 'px),1fr))' : '1fr';
+        if (props.height) { content.style.maxHeight = props.height + 'px'; content.style.overflow = 'auto'; }
+        const nav = collection.querySelector('.collection-pages');
+        nav.replaceChildren();
+        if (props.page_size && pages > 1) {
+          for (const [label, next, disabled] of [['이전 페이지', page - 1, page === 0], ['다음 페이지', page + 1, page + 1 >= pages]]) {
+            const button = document.createElement('button'); button.textContent = label; button.disabled = disabled;
+            button.onclick = () => { state[props.page_state_key] = next; update(); };
+            nav.append(button);
+            if (next < page) nav.append(Object.assign(document.createElement('span'), { textContent: (page + 1) + ' / ' + pages }));
+          }
+        }
+      }
       for (const element of article.querySelectorAll("[data-visible]")) {
         element.hidden = !evaluatePreviewCondition(parse(element, "visible"), roots());
       }
@@ -328,6 +360,10 @@ function previewRuntime() {
 }
 
 const RUNTIME_SCRIPT = [
+  escape.toString(),
+  jsonAttribute.toString(),
+  nodeAttributes.toString(),
+  nodeHtml.toString(),
   resolvePreviewPath.toString(),
   previewValuesEqual.toString(),
   resolvePreviewValue.toString(),
@@ -345,6 +381,7 @@ const CSS = [
   ".screen-meta,.app-bar,.screen-body,.ui-nav{padding:var(--space)}.screen-meta{display:flex;gap:8px;background:var(--surface-variant);color:var(--on-surface-variant)}.screen-meta span{margin-right:auto}.app-bar{display:flex;align-items:center;border-bottom:1px solid var(--outline-variant)}.app-bar div:first-child{display:grid}.app-bar small{color:var(--on-surface-variant)}.app-actions{margin-left:auto;display:flex;gap:6px}",
   ".screen-body,.ui-layout,.ui-surface,.ui-collection{display:flex;flex-direction:column;gap:var(--space)}.ui-layout.row{flex-direction:row;align-items:center}.ui-layout.wrap,.ui-nav{display:flex;flex-flow:row wrap;gap:8px}.ui-layout.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.ui-surface,.ui-collection,.ui-empty{padding:var(--space);border:1px solid var(--outline-variant);border-radius:var(--radius);background:color-mix(in srgb,var(--surface),var(--primary-container) 9%)}",
   "h3,p{margin:0}.ui-text.heading{font-size:1.25em;font-weight:750}.ui-text.caption,small{color:var(--on-surface-variant)}button,.ui-chip{border:0;border-radius:999px;padding:8px 13px;background:var(--primary-container);color:var(--on-primary-container);font:inherit}.ui-icon{font:600 .75em monospace;color:var(--primary)}.ui-image{min-height:90px;display:grid;place-items:center;border-radius:var(--radius);background:var(--surface-variant);color:var(--on-surface-variant)}.ui-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--primary);color:var(--on-primary)}.ui-badge{padding:3px 7px;border-radius:99px;background:var(--error-container);color:var(--on-error-container)}.ui-metric{display:grid;padding:12px;border-radius:var(--radius);background:var(--secondary-container);color:var(--on-secondary-container)}.ui-metric strong{font-size:1.35em}.ui-field{display:grid;gap:5px}input,select{width:100%;padding:11px;border:1px solid var(--outline);border-radius:var(--radius);background:var(--surface);color:var(--on-surface)}progress{accent-color:var(--primary);width:100%}hr{width:100%;border:0;border-top:1px solid var(--outline-variant)}.ui-spacer{min-height:12px}.ui-nav{border-top:1px solid var(--outline-variant)}",
+  ".bottom-bar{position:sticky;bottom:0;z-index:2;padding:12px var(--space);background:var(--surface);border-top:1px solid var(--outline-variant)}.collection-pages{display:flex;align-items:center;justify-content:center;gap:12px}.collection-pages button{min-height:48px}.collection-items>*{content-visibility:auto;contain-intrinsic-size:auto 80px}",
   "[hidden]{display:none!important}[data-action]{cursor:pointer}.runtime-inspector{margin:0 var(--space) var(--space);border-top:1px solid var(--outline-variant);padding-top:8px}.runtime-inspector pre{max-height:260px;overflow:auto;white-space:pre-wrap;font:12px/1.4 ui-monospace,monospace;color:var(--on-surface-variant)}",
 ].join("");
 
@@ -356,7 +393,7 @@ export function renderPreviewHtml(manifest) {
       const safeConfig = JSON.stringify(config).replaceAll("<", "\\u003c").replaceAll(">", "\\u003e").replaceAll("&", "\\u0026");
       return '<article class="screen" data-extension="' + escape(extension.id) + '" style="' + themeVariables(config) + '">' +
         '<div class="screen-meta"><span>' + escape(extension.point) + "</span><strong>" + escape(extension.title) + "</strong></div>" +
-        chromeHtml(config) + '<main class="screen-body">' + nodeHtml(config.view) + '</main><details class="runtime-inspector"><summary>Runtime Inspector</summary><pre></pre></details><script type="application/json" class="runtime-config">' + safeConfig + "</script></article>";
+        chromeHtml(config) + '<main class="screen-body">' + nodeHtml(config.view) + '</main>' + (config.bottom_bar ? '<footer class="bottom-bar">' + nodeHtml(config.bottom_bar) + '</footer>' : '') + '<details class="runtime-inspector"><summary>Runtime Inspector</summary><pre></pre></details><script type="application/json" class="runtime-config">' + safeConfig + "</script></article>";
     }).join("")
     : '<article class="screen"><div class="ui-empty"><strong>UI extension 없음</strong><p>UI Runtime v2 화면을 추가하면 여기에 표시됩니다.</p></div></article>';
   const title = escape(manifest.name);

package/src/workspace.js

@@ -152,7 +152,7 @@ export class LocalWorkspace {
       version: "1.0.0",
       cloud_project_id: null,
       required_secrets: [],
-      min_morit_version: "1.7.13",
+      min_morit_version: "1.7.14",
       max_morit_version: "1.999.999",
       permissions: [],
       capabilities: [],
@@ -738,6 +738,12 @@ function validateMetadata(pluginId, name, publisher, description) {
   if (typeof description !== "string" || description.length > 4000) throw new Error("description must not exceed 4000 characters");
 }
 
+function usesUi1714(node) {
+  if (!node || typeof node !== "object") return false;
+  const props = node.props || {};
+  return ["page_size", "page_state_key", "item_height"].some(key => Object.hasOwn(props, key)) || (node.type === "grid" && props.source !== undefined) || (node.children || []).some(usesUi1714);
+}
+
 function usesUi1713(node) {
   if (!node || typeof node !== "object") return false;
   const props = node.props || {};
@@ -791,6 +797,7 @@ function validateManifest(manifest, files) {
   const capabilities = objectCollection(manifest.capabilities, "manifest.capabilities", 64);
   const uiExtensions = objectCollection(manifest.ui_extensions, "manifest.ui_extensions", 64);
   const minimum = manifest.min_morit_version.split(".").map(Number);
+  if ((minimum[0] < 1 || (minimum[0] === 1 && (minimum[1] < 7 || (minimum[1] === 7 && minimum[2] < 14)))) && uiExtensions.some(extension => extension.config?.bottom_bar != null || usesUi1714(extension.config?.view))) throw new Error("pagination and bottom_bar require min_morit_version 1.7.14 or newer");
   if ((minimum[0] < 1 || (minimum[0] === 1 && (minimum[1] < 7 || (minimum[1] === 7 && minimum[2] < 13)))) && uiExtensions.some(extension => usesUi1713(extension.config?.view))) throw new Error("new UI properties require min_morit_version 1.7.13 or newer");
   const credentials = objectCollection(manifest.credentials === undefined ? [] : manifest.credentials, "manifest.credentials", 16);
   const slashCommands = objectCollection(manifest.slash_commands === undefined ? [] : manifest.slash_commands, "manifest.slash_commands", 32);
@@ -1320,7 +1327,7 @@ function validateUiConfig(extension, capabilities, routeIds, files, hasStorage =
     if (config.placement != null && !["card", "action"].includes(extension.point)) throw new Error("UI placement is only valid for home extensions");
     validateUiRuntimeV2(config, executable, routeIds, capabilitySchemas);
     validateResponseComponent(config, extension.point === "response");
-    for (const asset of uiRuntimeAssetPaths(config.view)) {
+    for (const asset of [...uiRuntimeAssetPaths(config.view), ...uiRuntimeAssetPaths(config.bottom_bar)]) {
       if (!(asset in files)) throw new Error(`UI image asset is not packaged: ${asset}`);
     }
     return;
@@ -1500,7 +1507,9 @@ function validateUiRuntimeV2(config, executable, routes, capabilitySchemas = new
   validateUiAppBar(config.app_bar, executable, routes, sourceIds, stateKeys);
   validateUiNavigation(config.navigation, executable, routes, sourceIds, stateKeys);
   assertObject(config.view, "UI Runtime v2 view");
-  validateUiNode(config.view, 0, { value: 0 }, executable, routes, sourceIds, stateKeys, null);
+  const nodeCounter = { value: 0 };
+  validateUiNode(config.view, 0, nodeCounter, executable, routes, sourceIds, stateKeys, null);
+  if (config.bottom_bar != null) validateUiNode(config.bottom_bar, 0, nodeCounter, executable, routes, sourceIds, stateKeys, null, "bottom_bar");
   validateUiCapabilityBindings(config, sources, capabilitySchemas);
 }
 
@@ -1579,6 +1588,13 @@ function validateThemeContrast(theme) {
 function collectThemeWarnings(manifest) {
   const warnings = [];
   for (const extension of manifest.ui_extensions || []) {
+    function visit(node, path) {
+      if (!node || typeof node !== "object") return;
+      const allowed = contract.ui_runtime.component_props[node.type] || [];
+      for (const key of Object.keys(node.props || {})) if (!( !contract.ui_runtime.common_props_excluded_components.includes(node.type) && contract.ui_runtime.common_props.includes(key)) && !allowed.includes(key)) warnings.push(`${path}.props.${key}: ignored by ${node.type}; remove or move to a supported component`);
+      (node.children || []).forEach((child, index) => visit(child, `${path}.children[${index}]`));
+    }
+    for (const field of ["view", "bottom_bar"]) visit(extension.config?.[field], `${extension.id}.${field}`);
     const theme = extension?.config?.theme;
     if (!theme || typeof theme !== "object" || Array.isArray(theme)) continue;
     for (const [mode, variant] of [["base", theme], ["light", theme.light], ["dark", theme.dark]]) {
@@ -1663,7 +1679,16 @@ function uiRuntimeAssetPaths(view) {
   return result;
 }
 
-function validateUiNode(node, depth, counter, executable, routes, sources, stateKeys, parentType) {
+function validateUiNode(node, depth, counter, executable, routes, sources, stateKeys, parentType, path = "view") {
+  try { validateUiNodeAt(node, depth, counter, executable, routes, sources, stateKeys, parentType, path); }
+  catch (error) {
+    if (/^(view[.:]|bottom_bar)/.test(error.message)) throw error;
+    const key = Object.keys(node?.props || {}).find(key => !contract.ui_runtime.prop_fields.includes(key) || error.message.split(" ").includes(key));
+    throw new Error(`${key ? `${path}.props.${key}` : path}: ${error.message}`);
+  }
+}
+
+function validateUiNodeAt(node, depth, counter, executable, routes, sources, stateKeys, parentType, path) {
   const nodeKeys = new Set(contract.ui_runtime.node_fields);
   rejectUnknownFields(node, nodeKeys, "UI component");
   counter.value += 1;
@@ -1672,6 +1697,7 @@ function validateUiNode(node, depth, counter, executable, routes, sources, state
   if (node.id != null && (typeof node.id !== "string" || !UI_IDENTIFIER.test(node.id))) throw new Error("UI component id is invalid");
   const props = node.props === undefined ? {} : node.props;
   validateUiProps(node.type, props, sources, stateKeys);
+  if (node.type === "grid" && props.source !== undefined && node.children?.length !== 1) throw new Error("data grid requires one item template");
   validateUiCondition(node.visible_when, stateKeys, sources);
   if (node.action != null && !["surface", "card", "button", "chip", "form", "field", "select", "switch"].includes(node.type)) {
     throw new Error("UI action requires an interactive component");
@@ -1691,13 +1717,20 @@ function validateUiNode(node, depth, counter, executable, routes, sources, state
   }
   if (node.type === "positioned" && parentType !== "stack") throw new Error("positioned UI component requires a stack parent");
   if (node.type === "expanded" && !["row", "column"].includes(parentType)) throw new Error("expanded UI component requires a row or column parent");
-  for (const child of children) {
+  for (const [index, child] of children.entries()) {
     assertObject(child, "UI component child");
-    validateUiNode(child, depth + 1, counter, executable, routes, sources, stateKeys, node.type);
+    validateUiNode(child, depth + 1, counter, executable, routes, sources, stateKeys, node.type, `${path}.children[${index}]`);
   }
 }
 
 function validateUiProps(nodeType, props, sources, stateKeys) {
+  if (["page_size", "page_state_key", "item_height"].some(key => Object.hasOwn(props, key)) && !["list", "grid"].includes(nodeType)) throw new Error("pagination requires a list or grid");
+  if (props.item_height !== undefined && nodeType !== "grid") throw new Error("item_height requires a data grid");
+  if (nodeType === "grid" && props.source === undefined && ["page_size", "page_state_key", "item_height"].some(key => Object.hasOwn(props, key))) throw new Error("grid pagination requires source");
+  if (Object.hasOwn(props, "page_size") !== Object.hasOwn(props, "page_state_key")) throw new Error("page_size and page_state_key must be supplied together");
+  if (props.page_size !== undefined && (!Number.isInteger(props.page_size) || props.page_size < 1 || props.page_size > 100)) throw new Error("UI page_size is invalid");
+  if (props.page_state_key !== undefined && !stateKeys.has(props.page_state_key)) throw new Error("UI page_state_key references unknown state");
+  if (props.item_height !== undefined) validateUiNumber(props.item_height, "UI item_height", 48, 4096);
   const allowed = new Set(contract.ui_runtime.prop_fields);
   rejectUnknownFields(props, allowed, "UI component props");
   const surfaceProps = new Set([
@@ -1768,7 +1801,7 @@ function validateUiProps(nodeType, props, sources, stateKeys) {
   if (nodeType !== "positioned" && ["left", "top", "right", "bottom"].some((key) => props[key] !== undefined)) throw new Error("position offsets require a positioned UI component");
   if (nodeType !== "expanded" && props.flex !== undefined) throw new Error("flex requires an expanded UI component");
   if ((nodeType !== "scroll" && props.shrink_wrap !== undefined) || (!["scroll", "list"].includes(nodeType) && props.scroll_direction !== undefined)) throw new Error("scroll properties require a scroll UI component");
-  if (["list", "timeline", "calendar", "chart", "table"].includes(nodeType)) {
+  if (["list", "timeline", "calendar", "chart", "table"].includes(nodeType) || (nodeType === "grid" && props.source !== undefined)) {
     if (typeof props.source !== "string" || !UI_BINDING.test(props.source) || !props.source.startsWith("data.") || !sources.has(props.source.split(".")[1])) throw new Error("UI list source is invalid");
   }
   const chartType = props.chart_type === undefined ? "bar" : props.chart_type;