this.gui 1.3.61 → 1.3.63

package/README.md

@@ -1,96 +1,68 @@
 # .GUI
 
-###### A collection of components and building blocks enabling GUI generation.
+A collection of components and building blocks enabling **.GUI** generation.
 <img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_180/v1761276578/this.gui.npm.png" alt="This.GUI logo" width="180" />
 
-### 🔗 Links
+### Links
+- **.GUI Website:** https://neurons-me.github.io/GUI/
+- **Storybook:** https://neurons-me.github.io/GUI/storybook-static/
 
-- **.GUI Website:** https://neurons-me.github.io/this.GUI/
-- **Storybook:** https://neurons-me.github.io/storybook-static/
-- **neurons.me:** https://neurons-me.github.io/
+## Quick Start (npx)
 
-**Install** via:
+##### Create a new app using this.GUI:
 
 ```bash
-npm install this.gui
+npx this.gui AppName
 ```
 
-**Use** as an **exportable React library**:
+```bash
+cd AppName
+```
 
-```ts
-import { TopBar } from 'this.gui'
+```bash
+npm install
 ```
 
-**.GUI** provides a rich collection of **atomic** and **composite** **components**  ready to use:
-
-```tsx
-import { Button, Card, Text } from 'this.gui';
-export function Example() {
-  return (
-    <Card>
-      <Text size="lg" weight="bold">Welcome!</Text>
-      <Button onClick={() => alert('Clicked!')}>Click me</Button>
-    </Card>
-  );
-}
+```bash
+npm run dev
 ```
 
-### Or
+This generates a **minimal app** pre-wired with `this.gui`.
 
-```ts
-import GUI from 'this.gui';
-```
+### What you get
+- `src/main.tsx` boots a React app
+- `GuiProvider` is already mounted
+- A simple `App.tsx` example using core atoms
 
-All components are theme-aware and automatically inherit styles and tokens from the `GuiProvider`
-<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_320/v1761281165/geometry_shapes-removebg-preview_anrdke.png" alt="Geometry shapes" width="320" />
-
-## Initialization
-To initialize **This.GUI** in your project, wrap your application with the`GuiProvider` and optionally set a theme:
-
-```tsx
-import { GuiProvider } from 'this.gui';
-import { Layout } from 'this.gui';
-
-function App() {
-  return (
-    <GuiProvider theme="dark">
-      <Layout>
-        <h1>Hello from This.GUI</h1>
-      </Layout>
-    </GuiProvider>
-  );
-}
-
-export default App;
-```
+<img src="https://res.cloudinary.com/dkwnxf6gm/image/upload/w_320/v1761281165/geometry_shapes-removebg-preview_anrdke.png" alt="Geometry shapes" width="244" />
 
-This structure sets up the reactive theme system, context, and global styles  
-needed by all This.GUI components.
+### Next steps
 
----
+###### Installing using npm:
 
-## Declarative Rendering (Advanced)
-Under the hood **This.GUI** ships a resolver registry (`src/registry`) so teams  
-can plug a JSON → React renderer into the design system. The npm package does  
-**not** expose a ready-made `<RenderGUI />` helper yet; if you want declarative  
-rendering you need to wire it yourself:
+```bash
+npm install this.gui
+```
+
+All components are theme-aware and automatically inherit styles and tokens from the `GuiProvider`
 
-```tsx
-import { GuiRegistry } from 'this.gui/registry';
-import type { ResolveCtx } from 'this.gui/registry';
+- Explore components in Storybook: https://neurons-me.github.io/GUI/storybook-static/
+- Import atoms directly:
 
-function renderSpec(spec: { type: string; props?: any }, ctx?: ResolveCtx) {
-  const entry = GuiRegistry[spec.type];
-  if (!entry) throw new Error(`Unknown component type: ${spec.type}`);
-  return entry.resolve(spec as any, ctx);
-}
+```ts
+import { Button, Typography, Box } from "this.gui";
+// or subpath (more explicit)
+import { Button as AtomButton } from "this.gui/atoms";
 ```
 
-With that in place you can traverse a schema and render children as you prefer.  
-Until an official renderer is published, consume the React components directly  
-or build a thin wrapper like the example above.
+### Add the stylesheet
+`this.gui` ships a compiled stylesheet. Import it once at your app entry:
+
+```ts
+import "this.gui/style.css";
+```
 
----
+> **Tip:** If you're using the UMD build in a plain HTML page, include `this.gui.css` from the `dist/` folder and load `this.gui.umd.js` via a `<script>` tag.
 
 ## 🪐 License
 MIT © [neurons.me](https://neurons.me)

package/dist/material-symbols.css

@@ -3,7 +3,7 @@
   font-style: normal;
   font-weight: 100 700;
   font-display: block;
-  src: url("/material-symbols-rounded.woff2") format("woff2");
+  src: url("./material-symbols-rounded.woff2") format("woff2");
 }
 .material-symbols-rounded {
   font-family: "Material Symbols Rounded";