@3sln/deck 0.0.9 → 0.0.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3sln/deck",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "description": "A Vite plugin for building scalable, zero-config, Markdown-based component playgrounds and documentation sites.",
   "type": "module",
   "author": "Ray Stubbs",
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@3sln/bones": "^0.0.4",
-    "@3sln/dodo": "^0.0.5",
+    "@3sln/dodo": "^0.0.7",
     "@3sln/ngin": "^0.0.1",
     "fs-extra": "^11.3.2",
     "glob": "^10.3.10",

package/src/deck-demo.js

@@ -62,16 +62,9 @@ const propertiesStyle = css`
     gap: 1em;
     margin-bottom: 0.75em;
     width: 250px;
-  }
-  .property-label {
-    flex: 1;
-    text-align: right;
-    font-size: 0.9em;
     color: var(--text-color);
-    opacity: 0.8;
   }
   .property-item input {
-    flex: 2;
     flex-grow: 0;
   }
   input[type='text'] {
@@ -144,15 +137,17 @@ function propertyControl(engine, name) {
           return input({type: 'range', min: options.min, max: options.max, value}).on({
             input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.valueAsNumber)),
           });
-        case 'text':
-          return input({type: 'text', value}).on({
-            input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.value)),
+        case 'checkbox':
+          return input({type: 'checkbox', checked: value}).on({
+            input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.checked)),
           });
         default:
-          return span('Unknown property type');
+          return input({type: options?.type ?? 'text', value}).on({
+            input: e => engine.dispatch(new UpdatePropertyValue(name, e.target.value)),
+          });
       }
     });
-    return div({className: 'property-item'}, label({className: 'property-label'}, name), control);
+    return label({className: 'property-item'}, name, control);
   });
 }
 
@@ -208,6 +203,8 @@ function createEngine(src, canonicalSrc) {
       return;
     }
 
+    propertyPanelCreated = true;
+
     engine.dispatch(
       new CreateOrUpdatePanel({
         name: propsPanelName,
@@ -225,12 +222,14 @@ function createEngine(src, canonicalSrc) {
   };
 
   const driver = {
-    panel: (name, render, {pane = 'left', order = undefined} = {}) => {
+    panel: (name, render, {pane = 'left', order = undefined, mode = 'shadow', colorScheme = undefined} = {}) => {
       const panel = {
         name,
         pane,
         render,
         order,
+        mode,
+        colorScheme,
       };
       engine.dispatch(new CreateOrUpdatePanel(panel));
     },
@@ -740,7 +739,7 @@ const demoStyle = css`
   .panel-content.active {
     pointer-events: auto;
     overflow: auto;
-    width: initial;
+    width: 100%;
   }
   pre > code {
     padding: 1em;
@@ -817,16 +816,38 @@ class DeckDemo extends HTMLElement {
               .key(p.name)
               .opaque()
               .on({
-                $attach: el => {
-                  const div = document.createElement('div');
-                  const shadow = div.attachShadow({mode: 'open'});
-                  const aborter = new AbortController();
+                $update: el => {
+                  if (p.render === el._renderer) {
+                    return;
+                  }
 
-                  el.appendChild(div);
+                  el._aborter?.abort();
+                  const aborter = new AbortController();
                   el._aborter = aborter;
-                },
-                $update: el => {
-                  p.render(el.firstChild.shadowRoot, el._aborter.signal);
+                  el._renderer = p.render;
+
+                  if (p.mode === 'iframe') {
+                      const iframe = document.createElement('iframe');
+                      iframe.style.cssText = 'border: none; width: 100%; height: 100%; display: block;';
+                      
+                      iframe.onload = () => {
+                          const doc = iframe.contentDocument;
+                          if (!doc) return;
+                          
+                          if (p.colorScheme) {
+                              doc.documentElement.style.colorScheme = p.colorScheme;
+                          }
+                          doc.body.style.margin = '0';
+                          
+                          p.render(doc.body, aborter.signal);
+                      };
+                      el.replaceChildren(iframe);
+                  } else {
+                      const div = document.createElement('div');
+                      const shadow = div.attachShadow({mode: 'open'});
+                      el.replaceChildren(div);
+                      p.render(shadow, aborter.signal);
+                  }
                 },
                 $detach: el => {
                   el._aborter?.abort();