Initial commit: Clean DSS implementation

Migrated from design-system-swarm with fresh git history.
Old project history preserved in /home/overbits/apps/design-system-swarm

Core components:
- MCP Server (Python FastAPI with mcp 1.23.1)
- Claude Plugin (agents, commands, skills, strategies, hooks, core)
- DSS Backend (dss-mvp1 - token translation, Figma sync)
- Admin UI (Node.js/React)
- Server (Node.js/Express)
- Storybook integration (dss-mvp1/.storybook)

Self-contained configuration:
- All paths relative or use DSS_BASE_PATH=/home/overbits/dss
- PYTHONPATH configured for dss-mvp1 and dss-claude-plugin
- .env file with all configuration
- Claude plugin uses ${CLAUDE_PLUGIN_ROOT} for portability

Migration completed: $(date)
🤖 Clean migration with full functionality preserved

admin-ui/js/components/ds-card.js

@@ -0,0 +1,177 @@
+/**
+ * DS Card - Web Component
+ *
+ * Usage:
+ *   <ds-card>
+ *     <ds-card-header>
+ *       <ds-card-title>Title</ds-card-title>
+ *       <ds-card-description>Description</ds-card-description>
+ *     </ds-card-header>
+ *     <ds-card-content>Content here</ds-card-content>
+ *     <ds-card-footer>Footer actions</ds-card-footer>
+ *   </ds-card>
+ *
+ * Attributes:
+ *   - interactive: boolean (adds hover effect)
+ */
+
+class DsCard extends HTMLElement {
+  static get observedAttributes() {
+    return ['interactive'];
+  }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+  }
+
+  disconnectedCallback() {
+    // Cleanup for consistency with other components
+    // This card has no event listeners, but disconnectedCallback
+    // is present for future extensibility and pattern consistency
+  }
+
+  attributeChangedCallback() {
+    if (this.shadowRoot.innerHTML) {
+      this.render();
+    }
+  }
+
+  get interactive() {
+    return this.hasAttribute('interactive');
+  }
+
+  render() {
+    const interactiveClass = this.interactive ? 'ds-card--interactive' : '';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+
+        :host {
+          display: block;
+        }
+      </style>
+      <div class="ds-card ${interactiveClass}">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+class DsCardHeader extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+      </style>
+      <div class="ds-card__header">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  disconnectedCallback() {
+    // Cleanup for consistency with other components
+  }
+}
+
+class DsCardTitle extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+      </style>
+      <h3 class="ds-card__title">
+        <slot></slot>
+      </h3>
+    `;
+  }
+
+  disconnectedCallback() {
+    // Cleanup for consistency with other components
+  }
+}
+
+class DsCardDescription extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+      </style>
+      <p class="ds-card__description">
+        <slot></slot>
+      </p>
+    `;
+  }
+
+  disconnectedCallback() {
+    // Cleanup for consistency with other components
+  }
+}
+
+class DsCardContent extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+      </style>
+      <div class="ds-card__content">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  disconnectedCallback() {
+    // Cleanup for consistency with other components
+  }
+}
+
+class DsCardFooter extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.shadowRoot.innerHTML = `
+      <style>
+      </style>
+      <div class="ds-card__footer">
+        <slot></slot>
+      </div>
+    `;
+  }
+
+  disconnectedCallback() {
+    // Cleanup for consistency with other components
+  }
+}
+
+customElements.define('ds-card', DsCard);
+customElements.define('ds-card-header', DsCardHeader);
+customElements.define('ds-card-title', DsCardTitle);
+customElements.define('ds-card-description', DsCardDescription);
+customElements.define('ds-card-content', DsCardContent);
+customElements.define('ds-card-footer', DsCardFooter);
+
+export { DsCard, DsCardHeader, DsCardTitle, DsCardDescription, DsCardContent, DsCardFooter };