@fragments-sdk/ui 0.11.0 → 0.12.0

package/README.md

@@ -29,6 +29,15 @@ import '@fragments-sdk/ui/styles';   // component styles (ui.css)
 import './styles/globals.scss';       // your seed overrides
 ```
 
+**Next.js users** — add `transpilePackages` to your `next.config.js`:
+
+```js
+// next.config.js
+const nextConfig = {
+  transpilePackages: ['@fragments-sdk/ui'],
+};
+```
+
 Then use components:
 
 ```tsx
@@ -279,6 +288,12 @@ npm install @fragments-sdk/ui @fragments-sdk/mcp
 
 The MCP server automatically discovers `fragments.json` from the installed `@fragments-sdk/ui` package. No configuration needed.
 
+Or use the CLI to set up everything at once:
+
+```bash
+npx @fragments-sdk/cli setup --mcp
+```
+
 ## Composition Blocks
 
 The library includes composition blocks — named patterns showing how components wire together for common use cases:

package/dist/assets/ui.css

@@ -13,6 +13,7 @@
   --fui-font-weight-normal: 400;
   --fui-font-weight-medium: 500;
   --fui-font-weight-semibold: 600;
+  --fui-font-weight-bold: 700;
   --fui-line-height-tight: 1.25;
   --fui-line-height-normal: 1.5;
   --fui-line-height-relaxed: 1.625;
@@ -5836,7 +5837,7 @@ a {
   overflow: visible;
   outline: none;
   box-shadow: 0 0 0 var(--fui-focus-ring-offset, 2px) var(--fui-bg-primary, #ffffff), 0 0 0 calc(var(--fui-focus-ring-offset, 2px) + var(--fui-focus-ring-width, 2px)) var(--fui-focus-ring-color, #18181b);
-}._root_wyoe3_1 {
+}._root_10ypa_1 {
   display: grid;
   min-height: 100vh;
   min-height: 100dvh;
@@ -5847,7 +5848,7 @@ a {
   transition: grid-template-columns var(--fui-transition-normal, 200ms) ease;
 }
 @media (max-width: 767px) {
-  ._root_wyoe3_1 {
+  ._root_10ypa_1 {
     grid-template-areas: "header" "main" "aside";
     grid-template-columns: 1fr;
     grid-template-rows: var(--appshell-header-height, 56px) 1fr auto;
@@ -5855,21 +5856,21 @@ a {
   }
 }
 
-._sidebarLayout_wyoe3_20 {
+._sidebarLayout_10ypa_20 {
   grid-template-areas: "sidebar header header" "sidebar main aside";
 }
 @media (max-width: 767px) {
-  ._sidebarLayout_wyoe3_20 {
+  ._sidebarLayout_10ypa_20 {
     grid-template-areas: "header" "main" "aside";
     grid-template-columns: 1fr;
   }
 }
 
-._sidebarFloatingLayout_wyoe3_30 {
+._sidebarFloatingLayout_10ypa_30 {
   background-color: var(--fui-bg-primary, #ffffff);
 }
 
-._header_wyoe3_34 {
+._header_10ypa_34 {
   grid-area: header;
   position: sticky;
   top: 0;
@@ -5878,11 +5879,11 @@ a {
   background-color: var(--fui-bg-primary, #ffffff);
 }
 
-._headerFloating_wyoe3_43 {
+._headerFloating_10ypa_43 {
   background-color: var(--fui-bg-primary, #ffffff);
 }
 
-._sidebar_wyoe3_20 {
+._sidebar_10ypa_20 {
   grid-area: sidebar;
   position: sticky;
   top: var(--appshell-header-height, 56px);
@@ -5892,7 +5893,7 @@ a {
   overflow: hidden;
 }
 @media (max-width: 767px) {
-  ._sidebar_wyoe3_20 {
+  ._sidebar_10ypa_20 {
     position: fixed;
     top: 0;
     left: 0;
@@ -5902,77 +5903,76 @@ a {
     height: 100dvh;
     z-index: 51;
   }
-  ._sidebar_wyoe3_20 > .root {
+  ._sidebar_10ypa_20 > .root {
     width: var(--appshell-sidebar-expanded-width, 240px);
   }
 }
-._sidebar_wyoe3_20 .root {
+._sidebar_10ypa_20 .root {
   height: 100%;
 }
 @media (max-width: 767px) {
-  ._sidebar_wyoe3_20 .root {
+  ._sidebar_10ypa_20 .root {
     height: 100vh;
     height: 100dvh;
   }
 }
 
-._sidebarFullHeight_wyoe3_81 {
+._sidebarFullHeight_10ypa_81 {
   top: 0;
   height: 100vh;
   height: 100dvh;
   z-index: var(--fui-header-z-index, 40);
 }
-._sidebarFullHeight_wyoe3_81 .root {
+._sidebarFullHeight_10ypa_81 .root {
   height: 100%;
 }
 
-._sidebarFloating_wyoe3_30 .root {
+._sidebarFloating_10ypa_30 .root {
   background-color: var(--fui-bg-primary, #ffffff);
 }
 
-._main_wyoe3_95 {
+._main_10ypa_95 {
   grid-area: main;
   min-height: 0;
   min-width: 0;
   background-color: var(--fui-bg-primary, #ffffff);
-  overflow-x: hidden;
 }
 
-._mainFloating_wyoe3_103 {
+._mainFloating_10ypa_102 {
   border-radius: var(--fui-radius-xl, 0.857rem);
   background-color: var(--fui-bg-secondary, #f4f4f5);
   overflow: hidden;
 }
 @media (max-width: 767px) {
-  ._mainFloating_wyoe3_103 {
+  ._mainFloating_10ypa_102 {
     border-radius: var(--fui-radius-lg, 0.571rem);
     width: 100%;
   }
 }
 
-._paddingSm_wyoe3_115 {
+._paddingSm_10ypa_114 {
   padding: var(--fui-padding-container-sm);
 }
 
-._paddingMd_wyoe3_119 {
+._paddingMd_10ypa_118 {
   padding: var(--fui-padding-container-md);
 }
 @media (min-width: 768px) {
-  ._paddingMd_wyoe3_119 {
+  ._paddingMd_10ypa_118 {
     padding: var(--fui-padding-container-lg);
   }
 }
 
-._paddingLg_wyoe3_128 {
+._paddingLg_10ypa_127 {
   padding: var(--fui-padding-container-lg);
 }
 @media (min-width: 768px) {
-  ._paddingLg_wyoe3_128 {
+  ._paddingLg_10ypa_127 {
     padding: var(--fui-padding-container-xl);
   }
 }
 
-._aside_wyoe3_137 {
+._aside_10ypa_136 {
   grid-area: aside;
   position: sticky;
   top: var(--appshell-header-height, 56px);
@@ -5985,7 +5985,7 @@ a {
   overflow: hidden;
 }
 @media (max-width: 767px) {
-  ._aside_wyoe3_137 {
+  ._aside_10ypa_136 {
     position: static;
     width: 100%;
     height: auto;
@@ -6122,13 +6122,13 @@ a {
 ._separator_ixv42_121[data-orientation=vertical] {
   width: 1px;
   align-self: stretch;
-}._text_1y18q_1 {
+}._text_yt586_1 {
   font-family: var(--fui-font-sans, "Geist Sans", "Geist", Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
   color: var(--fui-text-primary, #18181b);
   margin: 0;
 }
 
-._variant-section-label_1y18q_7 {
+._variant-section-label_yt586_7 {
   font-family: var(--fui-font-sans, Geist Sans, Geist, Inter, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif);
   font-size: var(--fui-font-size-xs, 0.857rem);
   color: var(--fui-text-secondary, #52525b);
@@ -6138,69 +6138,75 @@ a {
   letter-spacing: 0.05em;
 }
 
-._size-2xs_1y18q_17 {
+._size-2xs_yt586_17 {
   font-size: var(--fui-font-size-2xs, 0.714rem);
 }
 
-._size-xs_1y18q_21 {
+._size-xs_yt586_21 {
   font-size: var(--fui-font-size-xs, 0.857rem);
 }
 
-._size-sm_1y18q_25 {
+._size-sm_yt586_25 {
   font-size: var(--fui-font-size-sm, 1rem);
 }
 
-._size-base_1y18q_29 {
+._size-base_yt586_29,
+._size-md_yt586_30 {
   font-size: var(--fui-font-size-base, 1.143rem);
 }
 
-._size-lg_1y18q_33 {
+._size-lg_yt586_34 {
   font-size: var(--fui-font-size-lg, 1.286rem);
 }
 
-._size-xl_1y18q_37 {
+._size-xl_yt586_38 {
   font-size: var(--fui-font-size-xl, 1.714rem);
 }
 
-._size-2xl_1y18q_41 {
+._size-2xl_yt586_42 {
   font-size: var(--fui-font-size-2xl, 2.143rem);
 }
 
-._weight-normal_1y18q_45 {
+._weight-normal_yt586_46 {
   font-weight: var(--fui-font-weight-normal, 400);
 }
 
-._weight-medium_1y18q_49 {
+._weight-medium_yt586_50 {
   font-weight: var(--fui-font-weight-medium, 500);
 }
 
-._weight-semibold_1y18q_53 {
+._weight-semibold_yt586_54 {
   font-weight: var(--fui-font-weight-semibold, 600);
 }
 
-._color-primary_1y18q_57 {
+._weight-bold_yt586_58 {
+  font-weight: var(--fui-font-weight-bold, 700);
+}
+
+._color-primary_yt586_62 {
   color: var(--fui-text-primary, #18181b);
 }
 
-._color-secondary_1y18q_61 {
+._color-secondary_yt586_66 {
   color: var(--fui-text-secondary, #52525b);
 }
 
-._color-tertiary_1y18q_65 {
+._color-tertiary_yt586_70,
+._color-muted_yt586_71 {
   color: var(--fui-text-tertiary, #71717a);
 }
 
-._mono_1y18q_69 {
+._mono_yt586_75 {
   font-family: var(--fui-font-mono, "Geist Mono", "SF Mono", SFMono-Regular, ui-monospace, "Cascadia Code", Menlo, monospace);
 }
 
-._truncate_1y18q_73 {
+._truncate_yt586_79 {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-._lineClamp_1y18q_79 {
+._lineClamp_yt586_85 {
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: var(--fui-line-clamp, 2);

package/dist/blocks/AccountSettings.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=AccountSettings.block.d.ts.map

package/dist/blocks/ActivityFeed.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ActivityFeed.block.d.ts.map

package/dist/blocks/ActivityFeedSkeleton.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ActivityFeedSkeleton.block.d.ts.map

package/dist/blocks/BlogEditor.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=BlogEditor.block.d.ts.map

package/dist/blocks/ChatInterface.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ChatInterface.block.d.ts.map

package/dist/blocks/ChatMessages.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ChatMessages.block.d.ts.map

package/dist/blocks/CheckoutForm.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=CheckoutForm.block.d.ts.map

package/dist/blocks/CommandPalette.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=CommandPalette.block.d.ts.map

package/dist/blocks/ContactForm.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ContactForm.block.d.ts.map

package/dist/blocks/DashboardLayout.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=DashboardLayout.block.d.ts.map

package/dist/blocks/DashboardPage.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=DashboardPage.block.d.ts.map

package/dist/blocks/DashboardSkeleton.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=DashboardSkeleton.block.d.ts.map

package/dist/blocks/DataTable.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=DataTable.block.d.ts.map

package/dist/blocks/EmptyState.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=EmptyState.block.d.ts.map

package/dist/blocks/FAQSection.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=FAQSection.block.d.ts.map

package/dist/blocks/FeatureGrid.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=FeatureGrid.block.d.ts.map

package/dist/blocks/HeroSection.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=HeroSection.block.d.ts.map

package/dist/blocks/LoginForm.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=LoginForm.block.d.ts.map

package/dist/blocks/NavigationHeader.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=NavigationHeader.block.d.ts.map

package/dist/blocks/PaginatedTable.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=PaginatedTable.block.d.ts.map

package/dist/blocks/PricingComparison.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=PricingComparison.block.d.ts.map

package/dist/blocks/ProductCard.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ProductCard.block.d.ts.map

package/dist/blocks/RegistrationForm.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=RegistrationForm.block.d.ts.map

package/dist/blocks/SettingsDrawer.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=SettingsDrawer.block.d.ts.map

package/dist/blocks/SettingsPanel.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=SettingsPanel.block.d.ts.map

package/dist/blocks/ShoppingCart.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ShoppingCart.block.d.ts.map

package/dist/blocks/StatsCard.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=StatsCard.block.d.ts.map

package/dist/blocks/StatsCardSkeleton.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=StatsCardSkeleton.block.d.ts.map

package/dist/blocks/TableSkeleton.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=TableSkeleton.block.d.ts.map

package/dist/blocks/ThinkingStates.block.d.ts

@@ -1,3 +1,3 @@
-declare const _default: import("@fragments-sdk/cli/core").BlockDefinition;
+declare const _default: import("@fragments-sdk/core").BlockDefinition;
 export default _default;
 //# sourceMappingURL=ThinkingStates.block.d.ts.map

package/dist/codeblock.cjs

@@ -1,4 +1,26 @@
 "use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const React = require("react");
@@ -23,18 +45,28 @@ function _interopNamespaceDefault(e) {
 }
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 let _codeToHtml = null;
-let _shikiLoaded = false;
+let _shikiLoadPromise = null;
 let _shikiFailed = false;
-function loadShikiDeps() {
-  if (_shikiLoaded) return;
-  _shikiLoaded = true;
-  try {
-    const shiki = require("shiki");
-    _codeToHtml = shiki.codeToHtml;
-  } catch {
-    _shikiFailed = true;
+async function loadShikiDeps() {
+  if (_codeToHtml) return;
+  if (_shikiFailed) return;
+  if (!_shikiLoadPromise) {
+    _shikiLoadPromise = (async () => {
+      try {
+        const shiki = await import("shiki");
+        _codeToHtml = shiki.codeToHtml;
+      } catch {
+        _shikiFailed = true;
+      }
+    })();
   }
+  await _shikiLoadPromise;
 }
+const LANGUAGE_ALIASES = {
+  ts: "typescript",
+  js: "javascript",
+  text: "plaintext"
+};
 function CopyIcon({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "svg",
@@ -375,7 +407,7 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
     let cancelled = false;
     setHighlight((prev) => ({ ...prev, loading: true }));
     const run = async () => {
-      loadShikiDeps();
+      await loadShikiDeps();
       const fallbackHtml = `<pre class="shiki"><code>${escapeHtml(visibleCode)}</code></pre>`;
       if (_shikiFailed || !_codeToHtml) {
         if (_shikiFailed && process.env.NODE_ENV === "development") {
@@ -386,7 +418,8 @@ const CodeBlockBase = React__namespace.forwardRef(function CodeBlock2({
         return fallbackHtml;
       }
       try {
-        const html = await _codeToHtml(visibleCode, { lang: language, theme });
+        const resolvedLang = LANGUAGE_ALIASES[language] || language;
+        const html = await _codeToHtml(visibleCode, { lang: resolvedLang, theme });
         return processShikiHtml(html, {
           showLineNumbers,
           startLineNumber,