lion-make 0.3.1 → 0.4.0

package/guidelines/Guidelines.md

@@ -28,6 +28,22 @@ Use these defaults for every design decision unless a prompt overrides them expl
 
 ---
 
+## Mandatory Bootstrap
+
+**Every page must be wrapped in `<LionMakeProvider>`.** This component injects all design tokens (CSS custom properties), the Source Sans Pro font, and structural CSS for every component class. Without it, no tokens resolve, no layout works, and no font loads.
+
+```tsx
+import { LionMakeProvider } from 'lion-make'
+
+<LionMakeProvider>
+  {/* your entire page here */}
+</LionMakeProvider>
+```
+
+This is the very first thing to generate. Do not render any lion-make component outside of `<LionMakeProvider>`.
+
+---
+
 ## Non-Negotiable Principles
 
 1. **Zone lock.** Content types belong to exactly one zone. A hero component in the footer is invalid. Check `composition/zones.md` if unsure.

package/guidelines/discovery.md

@@ -136,6 +136,8 @@ Common failure modes and how to avoid them:
 
 | Task | Where to look |
 |---|---|
+| "How do I bootstrap the design system?" | Wrap everything in `<LionMakeProvider>` from `lion-make` — first, before anything else |
+|---|---|
 | "What can I put in the hero?" | `guidelines/content-types/hero/overview.md` |
 | "Which hero type should I use?" | `guidelines/content-types/hero/overview.md` → decision tree |
 | "What props does CTAHeroBlock take?" | `guidelines/content-types/hero/cta-hero-block.md` + `src/components/hero/CTAHeroBlock.tsx` |

package/guidelines/setup.md

@@ -37,6 +37,26 @@ Or in CSS:
 @import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700');
 ```
 
+## Required: LionMakeProvider
+
+**Wrap every page in `<LionMakeProvider>` before rendering anything else.** It injects all CSS tokens, the Source Sans Pro font, and structural CSS automatically — no separate CSS imports needed in Figma Make.
+
+```tsx
+import { LionMakeProvider } from 'lion-make'
+
+export function Page() {
+  return (
+    <LionMakeProvider>
+      {/* everything else goes here */}
+    </LionMakeProvider>
+  )
+}
+```
+
+If you skip this, CSS custom properties will not resolve, the font will not load, and all components will render unstyled.
+
+---
+
 ## Import Components
 
 Components are organized by zone. Import only what you need.
@@ -91,6 +111,7 @@ import {
 
 ```tsx
 import {
+  LionMakeProvider,
   PageForehead,
   Section,
   Container,
@@ -111,6 +132,7 @@ import {
 
 export function Page() {
   return (
+    <LionMakeProvider>
     <PageForehead>
 
       <Section zone="header">
@@ -160,6 +182,7 @@ export function Page() {
       </Section>
 
     </PageForehead>
+    </LionMakeProvider>
   )
 }
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lion-make",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Zone-locked CMS design system for Figma Make — structured layout system with CSS design tokens and React component stubs.",
   "type": "module",
   "main": "./dist/lion-make.umd.cjs",