@pure-ds/core 0.6.10 → 0.6.11

package/public/assets/pds/templates/workspace-settings-lab.html

@@ -0,0 +1,131 @@
+<section class="stack-lg" aria-label="Workspace Settings Lab">
+  <header class="card surface-elevated stack-sm">
+    <h2>Workspace Settings Lab</h2>
+    <p class="text-muted">Stress-test form controls, toggles, grouped settings, and responsive surfaces in one place.</p>
+  </header>
+
+  <section class="grid grid-auto-md gap-md">
+    <article class="card surface-base stack-sm border-gradient">
+      <h3>Profile form</h3>
+      <form data-required class="stack-sm">
+        <label>
+          <span data-label>Name</span>
+          <div class="input-icon">
+            <pds-icon icon="user"></pds-icon>
+            <input type="text" required placeholder="Alex Morgan" />
+          </div>
+        </label>
+        <label>
+          <span data-label>Email</span>
+          <div class="input-icon">
+            <pds-icon icon="envelope"></pds-icon>
+            <input type="email" required placeholder="alex@team.dev" />
+          </div>
+        </label>
+        <label>
+          <span data-label>Role</span>
+          <select>
+            <option>Designer</option>
+            <option>Developer</option>
+            <option>Product Manager</option>
+          </select>
+        </label>
+        <label>
+          <span data-label>Notes</span>
+          <textarea rows="3" placeholder="Context about this user profile..."></textarea>
+        </label>
+        <div class="flex gap-sm">
+          <button class="btn-primary" type="submit">Save</button>
+          <button class="btn-secondary" type="button">Cancel</button>
+        </div>
+      </form>
+    </article>
+
+    <article class="card surface-subtle stack-sm border-glow">
+      <h3>Notification panel (Dropdown)</h3>
+      <nav data-dropdown data-mode="auto">
+        <button class="btn-outline">Notification settings</button>
+        <div class="card surface-overlay grid grid-auto gap-sm">
+          <label data-toggle>
+            <input type="checkbox" checked />
+            <span data-label>Email alerts</span>
+          </label>
+          <label data-toggle>
+            <input type="checkbox" />
+            <span data-label>Slack alerts</span>
+          </label>
+          <label data-toggle>
+            <input type="checkbox" checked />
+            <span data-label>Weekly digest</span>
+          </label>
+          <div class="flex gap-sm">
+            <button class="btn-primary btn-sm">Apply</button>
+            <button class="btn-secondary btn-sm">Reset</button>
+          </div>
+        </div>
+      </nav>
+      <blockquote>
+        “Dropdown panels and toggle labels should remain readable under all palette combinations.”
+      </blockquote>
+    </article>
+  </section>
+
+  <section class="card surface-base stack-sm">
+    <h3>Settings sections (Accordion)</h3>
+    <section class="accordion" aria-label="Workspace settings groups">
+      <details open>
+        <summary id="settings-privacy">Privacy</summary>
+        <div role="region" aria-labelledby="settings-privacy" class="card stack-sm">
+          <label data-toggle>
+            <input type="checkbox" checked />
+            <span data-label>Require 2FA</span>
+          </label>
+          <label data-toggle>
+            <input type="checkbox" />
+            <span data-label>Mask sensitive fields</span>
+          </label>
+        </div>
+      </details>
+      <details>
+        <summary id="settings-appearance">Appearance</summary>
+        <div role="region" aria-labelledby="settings-appearance" class="card grid grid-cols-3 gap-sm">
+          <button class="btn-primary btn-sm">Primary</button>
+          <button class="btn-secondary btn-sm">Secondary</button>
+          <button class="btn-outline btn-sm">Outline</button>
+        </div>
+      </details>
+      <details>
+        <summary id="settings-audit">Audit & Activity</summary>
+        <div role="region" aria-labelledby="settings-audit" class="card stack-sm">
+          <article class="card surface-elevated stack-xs">
+            <strong>10:42</strong>
+            <small class="text-muted">Preset switched for review session.</small>
+          </article>
+          <article class="card surface-sunken stack-xs">
+            <strong>11:07</strong>
+            <small class="text-muted">Button radius and input spacing adjusted.</small>
+          </article>
+        </div>
+      </details>
+    </section>
+  </section>
+
+  <section class="grid grid-auto-sm gap-md">
+    <article class="card surface-elevated stack-sm">
+      <h4>State chip panel</h4>
+      <div class="flex gap-sm flex-wrap">
+        <span class="badge badge-primary">Primary</span>
+        <span class="badge badge-success">Success</span>
+        <span class="badge badge-warning">Warning</span>
+        <span class="badge badge-danger">Danger</span>
+      </div>
+    </article>
+    <article class="card surface-overlay stack-sm border-gradient">
+      <h4>Action states</h4>
+      <div class="flex gap-sm">
+        <button class="btn-primary btn-working" type="button">Saving</button>
+        <button class="btn-outline" type="button" disabled>Disabled</button>
+      </div>
+    </article>
+  </section>
+</section>

package/public/assets/pds/vscode-custom-data.json

@@ -689,10 +689,22 @@
         }
       ]
     },
+    {
+      "name": "COMPONENT_TAG",
+      "description": "PdsLiveConverter component"
+    },
     {
       "name": "EDITOR_TAG",
       "description": "PdsLiveEdit component"
     },
+    {
+      "name": "COMPONENT_TAG",
+      "description": "PdsLiveImporter component"
+    },
+    {
+      "name": "COMPONENT_TAG",
+      "description": "PdsLiveTemplateCanvas component"
+    },
     {
       "name": "pds-omnibox",
       "description": "PdsOmnibox component",
@@ -724,10 +736,6 @@
         {
           "name": "icon",
           "description": ""
-        },
-        {
-          "name": "item-grid",
-          "description": ""
         }
       ]
     },
@@ -792,6 +800,14 @@
               "name": "center"
             }
           ]
+        },
+        {
+          "name": "tile-min",
+          "description": "Minimum tile width (CSS length, e.g. \"250px\")"
+        },
+        {
+          "name": "tile-max",
+          "description": "Maximum tile width (CSS length, e.g. \"360px\")"
         }
       ]
     },
@@ -853,6 +869,40 @@
       "name": "pds-toaster",
       "description": "AppToaster component"
     },
+    {
+      "name": "pds-treeview",
+      "description": "PdsTreeview component",
+      "attributes": [
+        {
+          "name": "name",
+          "description": ""
+        },
+        {
+          "name": "value",
+          "description": ""
+        },
+        {
+          "name": "disabled",
+          "description": ""
+        },
+        {
+          "name": "required",
+          "description": ""
+        },
+        {
+          "name": "display-only",
+          "description": ""
+        },
+        {
+          "name": "expanded-all",
+          "description": ""
+        },
+        {
+          "name": "src",
+          "description": ""
+        }
+      ]
+    },
     {
       "name": "pds-upload",
       "description": "Drag-and-drop file uploader that participates in native forms.",

package/readme.md

@@ -1513,6 +1513,40 @@ npm run pds:css-data    # CSS token & class autocomplete
 
 See [INTELLISENSE.md](./INTELLISENSE.md) for setup instructions.
 
+### Import External HTML / Styles (`pds-import`)
+
+Use `pds-import` to run the same import pipeline used by live edit from CLI.
+
+```bash
+# 1) Convert HTML only (no style adoption)
+node packages/pds-cli/bin/pds-import.js \
+  --type tailwind-html \
+  --mode convert-only \
+  --source ./input.html \
+  --out ./out/import-result.json \
+  --html-out ./out/import-result.html
+
+# 2) Convert HTML + adopt inferred styles
+node packages/pds-cli/bin/pds-import.js \
+  --type tailwind-html \
+  --mode adopt-design-and-convert \
+  --source ./input.html \
+  --out ./out/adopt-result.json \
+  --html-out ./out/adopt-result.html \
+  --design-out ./out/adopt-design.json
+```
+
+**Modes**
+- `convert-only`: outputs converted template HTML only (no design patch application intent)
+- `adopt-design-and-convert`: outputs converted HTML plus inferred `designPatch`
+
+**Where output goes**
+- `--out`: full import result JSON (required)
+- `--html-out`: writes `result.template.html` when present
+- `--design-out`: writes `result.designPatch` JSON
+
+All paths are resolved from your current working directory, and directories are created automatically.
+
 ### Configuration
 
 ```javascript

package/src/js/pds-core/pds-config.js

@@ -1515,7 +1515,7 @@ export const presets = {
     },
     typography: {
       baseFontSize: 17,
-      fontScale: 1.5, // More dramatic scale for breathing room
+      fontScale: 1.35, // More dramatic scale for breathing room
       fontFamilyHeadings:
         'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
       fontFamilyBody:
@@ -1580,7 +1580,7 @@ export const presets = {
     },
     typography: {
       baseFontSize: 16,
-      fontScale: 1.618, // Golden ratio for futuristic feel
+      fontScale: 1.318, // Golden ratio for futuristic feel
       fontFamilyHeadings: "'Space Grotesk', system-ui, sans-serif",
       fontFamilyBody: "'Space Grotesk', system-ui, sans-serif",
     },
@@ -1652,7 +1652,7 @@ export const presets = {
     },
     typography: {
       baseFontSize: 16,
-      fontScale: 1.5,
+      fontScale: 1.3,
       fontFamilyHeadings: "'Quicksand', 'Comfortaa', sans-serif",
       fontFamilyBody: "'Quicksand', 'Comfortaa', sans-serif",
     },
@@ -1747,7 +1747,7 @@ export const presets = {
     },
     typography: {
       baseFontSize: 17,
-      fontScale: 1.5,
+      fontScale: 1.3,
       fontFamilyHeadings: "'Playfair Display', 'Georgia', serif",
       fontFamilyBody: "'Crimson Text', 'Garamond', serif",
       fontWeightNormal: 400,
@@ -1755,7 +1755,7 @@ export const presets = {
     },
     spatialRhythm: {
       baseUnit: 4,
-      scaleRatio: 1.333,
+      scaleRatio: 1.3,
     },
     shape: {
       radiusSize: enums.RadiusSizes.small, // Subtle elegance
@@ -1931,7 +1931,7 @@ export const presets = {
     },
     typography: {
       baseFontSize: 17,
-      fontScale: 1.414,
+      fontScale: 1.35,
       fontFamilyHeadings: "'Merriweather', Georgia, serif",
       fontFamilyBody: "'Noto Sans', system-ui, -apple-system, sans-serif",
     },
@@ -2292,8 +2292,8 @@ presets.default = {
   tags: ["app", "featured"],
   description: "Fresh and modern design system with balanced aesthetics and usability",
   options: {
-    liquidGlassEffects: true,
-    backgroundMesh: 4,
+    liquidGlassEffects: false,
+    backgroundMesh: 0,
   },
   
   form: {
@@ -2433,7 +2433,7 @@ presets.default = {
     densityCompact: 0.8,
     densityNormal: 1.0,
     densityComfortable: 1.2,
-    buttonMinHeight: enums.TouchTargetSizes.standard,
+    buttonMinHeight: 30,
     inputMinHeight: 40,
 
     // Layout utility system

package/src/js/pds-core/pds-enhancers.js

@@ -68,6 +68,7 @@ function enhanceDropdown(elem) {
   }
 
   const isMenu = menu.tagName?.toLowerCase() === "menu";
+  const VIEWPORT_PADDING = 8;
   if (isMenu && !menu.hasAttribute("role")) {
     menu.setAttribute("role", "menu");
   }
@@ -152,6 +153,145 @@ function enhanceDropdown(elem) {
     return spaceForRightAligned > spaceForLeftAligned ? "right" : "left";
   };
 
+  const readLengthToken = (tokenName, fallback = 8) => {
+    const raw = getComputedStyle(elem).getPropertyValue(tokenName).trim();
+    if (!raw) return fallback;
+    const probe = document.createElement("span");
+    probe.style.position = "fixed";
+    probe.style.visibility = "hidden";
+    probe.style.pointerEvents = "none";
+    probe.style.height = raw;
+    document.body.appendChild(probe);
+    const parsed = Number.parseFloat(getComputedStyle(probe).height);
+    probe.remove();
+    return Number.isFinite(parsed) ? parsed : fallback;
+  };
+
+  const clearFloatingMenuPosition = () => {
+    menu.style.removeProperty("position");
+    menu.style.removeProperty("left");
+    menu.style.removeProperty("top");
+    menu.style.removeProperty("right");
+    menu.style.removeProperty("bottom");
+    menu.style.removeProperty("margin-top");
+    menu.style.removeProperty("margin-bottom");
+    menu.style.removeProperty("max-width");
+    menu.style.removeProperty("max-inline-size");
+    menu.style.removeProperty("max-height");
+    menu.style.removeProperty("overflow");
+  };
+
+  const reattachFloatingMenu = () => {
+    if (menu.getAttribute("aria-hidden") !== "false") return;
+    clearFloatingMenuPosition();
+    requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        positionFloatingMenu();
+      });
+    });
+  };
+
+  const positionFloatingMenu = () => {
+    if (menu.getAttribute("aria-hidden") !== "false") return;
+    const anchorRect = (trigger || elem).getBoundingClientRect();
+    const viewport = window.visualViewport;
+    const viewportWidth =
+      viewport?.width || document.documentElement?.clientWidth || window.innerWidth;
+    const viewportHeight =
+      viewport?.height || document.documentElement?.clientHeight || window.innerHeight;
+    const viewportOffsetLeft = viewport?.offsetLeft || 0;
+    const viewportOffsetTop = viewport?.offsetTop || 0;
+    const maxMenuWidth = Math.max(1, viewportWidth - VIEWPORT_PADDING * 2);
+    const maxMenuHeight = Math.max(1, viewportHeight - VIEWPORT_PADDING * 2);
+
+    menu.style.maxWidth = `${Math.round(maxMenuWidth)}px`;
+    menu.style.maxInlineSize = `${Math.round(maxMenuWidth)}px`;
+    menu.style.maxHeight = `${Math.round(maxMenuHeight)}px`;
+    menu.style.overflow = "auto";
+
+    const { width: menuWidth, height: menuHeight } = measureMenuSize();
+    const spacing = readLengthToken("--spacing-2", 8);
+    const direction = resolveDirection();
+    const align = resolveAlign();
+
+    elem.dataset.dropdownDirection = direction;
+    elem.dataset.dropdownAlign = align;
+
+    let left = align === "right" ? anchorRect.right - menuWidth : anchorRect.left;
+    if (menuWidth >= maxMenuWidth - 1) {
+      left = viewportOffsetLeft + VIEWPORT_PADDING;
+    } else {
+      left = Math.max(
+        viewportOffsetLeft + VIEWPORT_PADDING,
+        Math.min(
+          left,
+          viewportOffsetLeft + viewportWidth - menuWidth - VIEWPORT_PADDING,
+        ),
+      );
+    }
+
+    let top =
+      direction === "up"
+        ? anchorRect.top - spacing - menuHeight
+        : anchorRect.bottom + spacing;
+    top = Math.max(
+      viewportOffsetTop + VIEWPORT_PADDING,
+      Math.min(
+        top,
+        viewportOffsetTop + viewportHeight - menuHeight - VIEWPORT_PADDING,
+      ),
+    );
+
+    menu.style.position = "fixed";
+    menu.style.left = `${Math.round(left)}px`;
+    menu.style.top = `${Math.round(top)}px`;
+    menu.style.right = "auto";
+    menu.style.bottom = "auto";
+    menu.style.marginTop = "0";
+    menu.style.marginBottom = "0";
+  };
+
+  let repositionHandler = null;
+  const bindReposition = () => {
+    if (repositionHandler) return;
+    repositionHandler = () => positionFloatingMenu();
+    window.addEventListener("resize", repositionHandler);
+    window.addEventListener("scroll", repositionHandler, true);
+  };
+
+  const unbindReposition = () => {
+    if (!repositionHandler) return;
+    window.removeEventListener("resize", repositionHandler);
+    window.removeEventListener("scroll", repositionHandler, true);
+    repositionHandler = null;
+  };
+
+  let configChangedHandler = null;
+  const bindConfigChanged = () => {
+    if (configChangedHandler || typeof document === "undefined") return;
+    configChangedHandler = () => {
+      if (menu.getAttribute("aria-hidden") !== "false") return;
+      elem.dataset.dropdownDirection = resolveDirection();
+      elem.dataset.dropdownAlign = resolveAlign();
+      reattachFloatingMenu();
+      setTimeout(() => {
+        if (menu.getAttribute("aria-hidden") !== "false") return;
+        reattachFloatingMenu();
+      }, 50);
+      setTimeout(() => {
+        if (menu.getAttribute("aria-hidden") !== "false") return;
+        reattachFloatingMenu();
+      }, 150);
+    };
+    document.addEventListener("pds:config-changed", configChangedHandler);
+  };
+
+  const unbindConfigChanged = () => {
+    if (!configChangedHandler || typeof document === "undefined") return;
+    document.removeEventListener("pds:config-changed", configChangedHandler);
+    configChangedHandler = null;
+  };
+
   // Store click handler reference for cleanup
   let clickHandler = null;
 
@@ -160,6 +300,9 @@ function enhanceDropdown(elem) {
     elem.dataset.dropdownAlign = resolveAlign();
     menu.setAttribute("aria-hidden", "false");
     trigger?.setAttribute("aria-expanded", "true");
+    bindReposition();
+    bindConfigChanged();
+    reattachFloatingMenu();
 
     // Add click-outside handler when opening
     if (!clickHandler) {
@@ -182,6 +325,9 @@ function enhanceDropdown(elem) {
   const closeMenu = () => {
     menu.setAttribute("aria-hidden", "true");
     trigger?.setAttribute("aria-expanded", "false");
+    unbindReposition();
+    unbindConfigChanged();
+    clearFloatingMenuPosition();
 
     // Remove click-outside handler when closing
     if (clickHandler) {