npm - @cmssy/cli - Versions diffs - 0.1.0 - Mend

@cmssy/cli 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/LICENSE +21 -0
package/README.md +649 -0
package/config.d.ts +2 -0
package/config.js +2 -0
package/dist/cli.d.ts +3 -0
package/dist/cli.d.ts.map +1 -0
package/dist/cli.js +236 -0
package/dist/cli.js.map +1 -0
package/dist/commands/add-source.d.ts +7 -0
package/dist/commands/add-source.d.ts.map +1 -0
package/dist/commands/add-source.js +238 -0
package/dist/commands/add-source.js.map +1 -0
package/dist/commands/build.d.ts +7 -0
package/dist/commands/build.d.ts.map +1 -0
package/dist/commands/build.js +105 -0
package/dist/commands/build.js.map +1 -0
package/dist/commands/configure.d.ts +6 -0
package/dist/commands/configure.d.ts.map +1 -0
package/dist/commands/configure.js +42 -0
package/dist/commands/configure.js.map +1 -0
package/dist/commands/create.d.ts +18 -0
package/dist/commands/create.d.ts.map +1 -0
package/dist/commands/create.js +444 -0
package/dist/commands/create.js.map +1 -0
package/dist/commands/dev.d.ts +6 -0
package/dist/commands/dev.d.ts.map +1 -0
package/dist/commands/dev.js +962 -0
package/dist/commands/dev.js.map +1 -0
package/dist/commands/init.d.ts +2 -0
package/dist/commands/init.d.ts.map +1 -0
package/dist/commands/init.js +362 -0
package/dist/commands/init.js.map +1 -0
package/dist/commands/migrate.d.ts +2 -0
package/dist/commands/migrate.d.ts.map +1 -0
package/dist/commands/migrate.js +227 -0
package/dist/commands/migrate.js.map +1 -0
package/dist/commands/package.d.ts +7 -0
package/dist/commands/package.d.ts.map +1 -0
package/dist/commands/package.js +136 -0
package/dist/commands/package.js.map +1 -0
package/dist/commands/publish.d.ts +13 -0
package/dist/commands/publish.d.ts.map +1 -0
package/dist/commands/publish.js +910 -0
package/dist/commands/publish.js.map +1 -0
package/dist/commands/sync.d.ts +6 -0
package/dist/commands/sync.d.ts.map +1 -0
package/dist/commands/sync.js +208 -0
package/dist/commands/sync.js.map +1 -0
package/dist/commands/upload.d.ts +7 -0
package/dist/commands/upload.d.ts.map +1 -0
package/dist/commands/upload.js +126 -0
package/dist/commands/upload.js.map +1 -0
package/dist/commands/workspaces.d.ts +2 -0
package/dist/commands/workspaces.d.ts.map +1 -0
package/dist/commands/workspaces.js +67 -0
package/dist/commands/workspaces.js.map +1 -0
package/dist/dev-ui/app.js +1284 -0
package/dist/dev-ui/index.html +1511 -0
package/dist/dev-ui-react/App.tsx +164 -0
package/dist/dev-ui-react/__tests__/previewData.test.ts +193 -0
package/dist/dev-ui-react/components/BlocksList.tsx +232 -0
package/dist/dev-ui-react/components/Editor.tsx +469 -0
package/dist/dev-ui-react/components/Preview.tsx +146 -0
package/dist/dev-ui-react/hooks/useBlocks.ts +80 -0
package/dist/dev-ui-react/index.html +13 -0
package/dist/dev-ui-react/main.tsx +8 -0
package/dist/dev-ui-react/styles.css +856 -0
package/dist/dev-ui-react/types.ts +45 -0
package/dist/types/block-config.d.ts +315 -0
package/dist/types/block-config.d.ts.map +1 -0
package/dist/types/block-config.js +8 -0
package/dist/types/block-config.js.map +1 -0
package/dist/utils/block-config.d.ts +10 -0
package/dist/utils/block-config.d.ts.map +1 -0
package/dist/utils/block-config.js +199 -0
package/dist/utils/block-config.js.map +1 -0
package/dist/utils/blocks-meta-cache.d.ts +28 -0
package/dist/utils/blocks-meta-cache.d.ts.map +1 -0
package/dist/utils/blocks-meta-cache.js +72 -0
package/dist/utils/blocks-meta-cache.js.map +1 -0
package/dist/utils/builder.d.ts +34 -0
package/dist/utils/builder.d.ts.map +1 -0
package/dist/utils/builder.js +140 -0
package/dist/utils/builder.js.map +1 -0
package/dist/utils/cmssy-config.d.ts +16 -0
package/dist/utils/cmssy-config.d.ts.map +1 -0
package/dist/utils/cmssy-config.js +19 -0
package/dist/utils/cmssy-config.js.map +1 -0
package/dist/utils/config.d.ts +9 -0
package/dist/utils/config.d.ts.map +1 -0
package/dist/utils/config.js +46 -0
package/dist/utils/config.js.map +1 -0
package/dist/utils/field-schema.d.ts +12 -0
package/dist/utils/field-schema.d.ts.map +1 -0
package/dist/utils/field-schema.js +202 -0
package/dist/utils/field-schema.js.map +1 -0
package/dist/utils/graphql.d.ts +8 -0
package/dist/utils/graphql.d.ts.map +1 -0
package/dist/utils/graphql.js +118 -0
package/dist/utils/graphql.js.map +1 -0
package/dist/utils/publish-helpers.d.ts +35 -0
package/dist/utils/publish-helpers.d.ts.map +1 -0
package/dist/utils/publish-helpers.js +141 -0
package/dist/utils/publish-helpers.js.map +1 -0
package/dist/utils/scanner.d.ts +36 -0
package/dist/utils/scanner.d.ts.map +1 -0
package/dist/utils/scanner.js +140 -0
package/dist/utils/scanner.js.map +1 -0
package/dist/utils/type-generator.d.ts +9 -0
package/dist/utils/type-generator.d.ts.map +1 -0
package/dist/utils/type-generator.js +85 -0
package/dist/utils/type-generator.js.map +1 -0
package/package.json +88 -0

package/dist/dev-ui/index.html ADDED Viewed

@@ -0,0 +1,1511 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cmssy Dev Server</title>
+    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Crect width='100' height='100' rx='20' fill='%23667eea'/%3E%3Ctext x='50' y='70' font-size='60' font-weight='bold' text-anchor='middle' fill='white' font-family='system-ui'%3EC%3C/text%3E%3C/svg%3E">
+    <style>
+      /* CSS Reset - scoped to dev UI only, not blocks in iframe */
+      *,
+      *::before,
+      *::after {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+      body {
+        line-height: 1.5;
+        -webkit-font-smoothing: antialiased;
+      }
+      img,
+      picture,
+      video,
+      canvas,
+      svg {
+        display: block;
+        max-width: 100%;
+      }
+      input,
+      button,
+      textarea,
+      select {
+        font: inherit;
+      }
+      p,
+      h1,
+      h2,
+      h3,
+      h4,
+      h5,
+      h6 {
+        overflow-wrap: break-word;
+      }
+      /* App Styles */
+      body {
+        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
+          sans-serif;
+        background: #f5f5f5;
+        overflow: hidden;
+        height: 100vh;
+      }
+      .container {
+        display: grid;
+        grid-template-columns: 280px 1fr 400px;
+        height: 100vh;
+        gap: 0;
+        transition: grid-template-columns 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      /* Collapsed sidebar states - narrow bar instead of hidden */
+      .container.left-collapsed {
+        grid-template-columns: 48px 1fr 400px;
+      }
+      .container.right-collapsed {
+        grid-template-columns: 280px 1fr 48px;
+      }
+      .container.left-collapsed.right-collapsed {
+        grid-template-columns: 48px 1fr 48px;
+      }
+      /* Left Panel - Blocks List */
+      .blocks-panel {
+        background: #ffffff;
+        border-right: 1px solid #e0e0e0;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      /* When collapsed, hide overflow */
+      .container.left-collapsed .blocks-panel {
+        overflow: hidden;
+      }
+      .blocks-header {
+        padding: 16px;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fafafa;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 60px;
+        flex-shrink: 0;
+      }
+      .blocks-header-content {
+        flex: 1;
+        min-width: 0;
+        transition: opacity 0.2s ease;
+      }
+      .blocks-header h1 {
+        font-size: 18px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .blocks-header p {
+        font-size: 13px;
+        color: #666;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      /* Hamburger toggle button */
+      .panel-toggle {
+        width: 32px;
+        height: 32px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 6px;
+        transition: all 0.2s ease;
+        flex-shrink: 0;
+      }
+      .panel-toggle:hover {
+        background: #e0e0e0;
+      }
+      .panel-toggle-icon {
+        width: 20px;
+        height: 20px;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        gap: 4px;
+      }
+      .panel-toggle-icon span {
+        display: block;
+        height: 2px;
+        background: #333;
+        border-radius: 2px;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      /* Collapsed state - smooth transitions */
+      .container.left-collapsed .blocks-header-content,
+      .container.right-collapsed .editor-header-content {
+        opacity: 0;
+        pointer-events: none;
+        width: 0;
+        overflow: hidden;
+        transition: opacity 0.2s ease, width 0.3s ease;
+      }
+      .container.left-collapsed .blocks-list,
+      .container.right-collapsed .editor-content {
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.2s ease;
+      }
+      .container.left-collapsed .blocks-panel {
+        overflow: hidden;
+      }
+      .container.right-collapsed .editor-panel {
+        overflow: hidden;
+      }
+      .container.left-collapsed .blocks-header,
+      .container.right-collapsed .editor-header {
+        justify-content: center;
+        padding: 16px 12px;
+        transition: all 0.3s ease;
+      }
+      /* Rotate hamburger icon when collapsed */
+      .container.left-collapsed .blocks-panel .panel-toggle-icon,
+      .container.right-collapsed .editor-panel .panel-toggle-icon {
+        transform: rotate(180deg);
+      }
+      /* Filters Section */
+      .blocks-filters {
+        padding: 12px;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fafafa;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+        flex-shrink: 0;
+      }
+      .container.left-collapsed .blocks-filters {
+        opacity: 0;
+        pointer-events: none;
+        height: 0;
+        padding: 0;
+        overflow: hidden;
+      }
+      .search-input {
+        width: 100%;
+        padding: 8px 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 13px;
+        background: white;
+        transition: all 0.2s;
+      }
+      .search-input:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      }
+      .search-input::placeholder {
+        color: #999;
+      }
+      .filter-tabs {
+        display: flex;
+        gap: 4px;
+        background: #e0e0e0;
+        padding: 3px;
+        border-radius: 8px;
+      }
+      .filter-tab {
+        flex: 1;
+        padding: 6px 12px;
+        border: none;
+        background: transparent;
+        cursor: pointer;
+        font-size: 12px;
+        font-weight: 500;
+        color: #666;
+        border-radius: 6px;
+        transition: all 0.2s;
+      }
+      .filter-tab:hover {
+        color: #333;
+      }
+      .filter-tab.active {
+        background: white;
+        color: #333;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+      }
+      .filter-row {
+        display: flex;
+        gap: 8px;
+      }
+      .filter-select {
+        flex: 1;
+        padding: 6px 10px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 12px;
+        background: white;
+        cursor: pointer;
+        color: #333;
+      }
+      .filter-select:focus {
+        outline: none;
+        border-color: #667eea;
+      }
+      /* Tags Multi-Select */
+      .tags-filter {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        max-height: 120px;
+        overflow-y: auto;
+        padding-right: 4px;
+      }
+      .tag-chip {
+        display: inline-flex;
+        align-items: center;
+        padding: 4px 10px;
+        border: 1px solid #ddd;
+        border-radius: 12px;
+        font-size: 11px;
+        cursor: pointer;
+        background: white;
+        color: #666;
+        transition: all 0.2s;
+      }
+      .tag-chip:hover {
+        border-color: #667eea;
+        color: #667eea;
+      }
+      .tag-chip.active {
+        background: #667eea;
+        border-color: #667eea;
+        color: white;
+      }
+      .clear-filters {
+        padding: 4px 10px;
+        border: 1px dashed #ddd;
+        border-radius: 12px;
+        font-size: 11px;
+        cursor: pointer;
+        background: transparent;
+        color: #999;
+        transition: all 0.2s;
+      }
+      .clear-filters:hover {
+        border-color: #e53935;
+        color: #e53935;
+      }
+      .blocks-list {
+        padding: 12px;
+        overflow-y: auto;
+        flex: 1;
+      }
+      /* Category Group */
+      .block-category {
+        margin-bottom: 16px;
+      }
+      .block-category:last-child {
+        margin-bottom: 0;
+      }
+      .category-header {
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #999;
+        padding: 8px 12px 6px;
+        margin-bottom: 4px;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+      .category-count {
+        font-size: 10px;
+        font-weight: 500;
+        background: #e0e0e0;
+        padding: 2px 6px;
+        border-radius: 10px;
+        color: #666;
+      }
+      /* Template badge */
+      .type-badge {
+        font-size: 10px;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-weight: 500;
+        margin-left: 8px;
+      }
+      .type-badge.template {
+        background: #f3e8ff;
+        color: #7c3aed;
+      }
+      .type-badge.block {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
+      /* Active filters indicator */
+      .active-filters {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 6px;
+        padding-top: 4px;
+      }
+      .active-filter-chip {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        padding: 2px 8px;
+        background: #667eea;
+        color: white;
+        border-radius: 10px;
+        font-size: 11px;
+      }
+      .active-filter-chip button {
+        background: none;
+        border: none;
+        color: white;
+        cursor: pointer;
+        padding: 0;
+        font-size: 12px;
+        opacity: 0.8;
+      }
+      .active-filter-chip button:hover {
+        opacity: 1;
+      }
+      /* Empty state for filtered results */
+      .no-results {
+        text-align: center;
+        padding: 40px 20px;
+        color: #999;
+      }
+      .no-results-icon {
+        font-size: 32px;
+        margin-bottom: 12px;
+        opacity: 0.5;
+      }
+      .block-item {
+        padding: 12px 16px;
+        margin-bottom: 4px;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+        border: 1px solid transparent;
+      }
+      .block-item:hover {
+        background: #f5f5f5;
+      }
+      .block-item.active {
+        background: #667eea;
+        color: white;
+        border-color: #667eea;
+      }
+      .block-item-name {
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+      .block-item-type {
+        font-size: 12px;
+        opacity: 0.7;
+      }
+      .block-item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 4px;
+      }
+      .block-item-footer {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        gap: 8px;
+      }
+      .version-badge {
+        font-size: 11px;
+        padding: 2px 6px;
+        background: #e3f2fd;
+        color: #1976d2;
+        border-radius: 4px;
+        font-weight: 500;
+      }
+      .status-badge {
+        font-size: 11px;
+        padding: 2px 8px;
+        border-radius: 10px;
+        font-weight: 500;
+      }
+      .status-badge.status-local {
+        background: #fff3e0;
+        color: #e65100;
+      }
+      .status-badge.status-published {
+        background: #e8f5e9;
+        color: #2e7d32;
+      }
+      /* Center Panel - Preview */
+      .preview-panel {
+        background: #fafafa;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+      }
+      .preview-header {
+        padding: 16px 24px;
+        background: white;
+        border-bottom: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+      .preview-info {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+      }
+      .preview-title {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+      }
+      .preview-actions {
+        display: flex;
+        gap: 8px;
+        align-items: center;
+      }
+      .btn-publish {
+        padding: 8px 16px;
+        background: #667eea;
+        color: white;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+      .btn-publish:hover {
+        background: #5568d3;
+      }
+      .preview-badge {
+        font-size: 12px;
+        padding: 4px 12px;
+        background: #e8f5e9;
+        color: #2e7d32;
+        border-radius: 12px;
+        font-weight: 500;
+      }
+      .preview-content {
+        flex: 1;
+        padding: 24px;
+        overflow: auto;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .preview-iframe-wrapper {
+        width: 100%;
+        height: 100%;
+        background: white;
+        border-radius: 12px;
+        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        overflow: hidden;
+      }
+      .preview-iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+      }
+      .preview-empty {
+        text-align: center;
+        color: #999;
+        padding: 60px 20px;
+      }
+      .preview-empty-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        opacity: 0.3;
+      }
+      /* Right Panel - Editor Drawer */
+      .editor-panel {
+        background: #ffffff;
+        border-left: 1px solid #e0e0e0;
+        display: flex;
+        flex-direction: column;
+        overflow: hidden;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+      .editor-header {
+        padding: 16px;
+        border-bottom: 1px solid #e0e0e0;
+        background: #fafafa;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 60px;
+        flex-shrink: 0;
+      }
+      .editor-header-content {
+        flex: 1;
+        min-width: 0;
+        transition: opacity 0.2s ease;
+      }
+      .editor-header h2 {
+        font-size: 16px;
+        font-weight: 600;
+        color: #1a1a1a;
+        margin-bottom: 4px;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .editor-header p {
+        font-size: 13px;
+        color: #666;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+      .editor-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 20px;
+      }
+      .editor-empty {
+        text-align: center;
+        color: #999;
+        padding: 40px 20px;
+      }
+      /* Form Fields */
+      .field-group {
+        margin-bottom: 24px;
+      }
+      .field-label {
+        display: block;
+        font-size: 13px;
+        font-weight: 500;
+        color: #333;
+        margin-bottom: 8px;
+      }
+      .field-required {
+        color: #e53935;
+        margin-left: 2px;
+      }
+      .field-help {
+        font-size: 12px;
+        color: #666;
+        margin-top: 4px;
+        font-weight: 400;
+      }
+      .field-input {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: inherit;
+        transition: all 0.2s;
+      }
+      .field-input:focus {
+        outline: none;
+        border-color: #667eea;
+        box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
+      }
+      .field-textarea {
+        min-height: 80px;
+        resize: vertical;
+      }
+      .field-select {
+        cursor: pointer;
+      }
+      .field-checkbox {
+        width: auto;
+        margin-right: 8px;
+      }
+      /* Repeater Fields */
+      .repeater-items {
+        border: 1px solid #e0e0e0;
+        border-radius: 8px;
+        padding: 12px;
+        background: #fafafa;
+      }
+      .repeater-item {
+        background: white;
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        padding: 16px;
+        margin-bottom: 12px;
+      }
+      .repeater-item:last-child {
+        margin-bottom: 0;
+      }
+      .repeater-item-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 12px;
+        padding-bottom: 12px;
+        border-bottom: 1px solid #f0f0f0;
+      }
+      .repeater-item-title {
+        font-size: 13px;
+        font-weight: 500;
+        color: #666;
+      }
+      .repeater-item-remove {
+        background: #ffebee;
+        color: #c62828;
+        border: none;
+        padding: 4px 12px;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+        font-weight: 500;
+        transition: all 0.2s;
+      }
+      .repeater-item-remove:hover {
+        background: #ffcdd2;
+      }
+      .repeater-add {
+        width: 100%;
+        padding: 10px;
+        background: white;
+        border: 1px dashed #667eea;
+        color: #667eea;
+        border-radius: 6px;
+        font-size: 13px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+        margin-top: 8px;
+      }
+      .repeater-add:hover {
+        background: #f5f7ff;
+        border-style: solid;
+      }
+      /* Loading State */
+      .loading {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 40px;
+        color: #999;
+      }
+      .spinner {
+        width: 20px;
+        height: 20px;
+        border: 2px solid #f3f3f3;
+        border-top: 2px solid #667eea;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+        margin-right: 12px;
+      }
+      @keyframes spin {
+        0% {
+          transform: rotate(0deg);
+        }
+        100% {
+          transform: rotate(360deg);
+        }
+      }
+      /* Media Field */
+      .media-field {
+        display: flex;
+        gap: 12px;
+        align-items: flex-start;
+      }
+      .media-preview {
+        width: 80px;
+        height: 80px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        overflow: hidden;
+        background: #fafafa;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      .media-preview img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      .media-placeholder {
+        color: #999;
+        font-size: 12px;
+      }
+      .media-input-group {
+        flex: 1;
+      }
+      /* Color Field */
+      .color-field {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
+      .color-preview {
+        width: 40px;
+        height: 40px;
+        border: 1px solid #ddd;
+        border-radius: 6px;
+        cursor: pointer;
+      }
+      .color-input {
+        flex: 1;
+      }
+      /* Publish Modal */
+      .modal {
+        position: fixed;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background: rgba(0, 0, 0, 0.5);
+        display: none;
+        align-items: center;
+        justify-content: center;
+        z-index: 9999;
+      }
+      .modal.active {
+        display: flex;
+      }
+      .modal-content {
+        background: white;
+        border-radius: 12px;
+        width: 90%;
+        max-width: 500px;
+        max-height: 80vh;
+        overflow: auto;
+      }
+      .modal-header {
+        padding: 20px 24px;
+        border-bottom: 1px solid #e0e0e0;
+      }
+      .modal-header h3 {
+        font-size: 20px;
+        font-weight: 600;
+        margin: 0 0 4px 0;
+      }
+      .modal-header p {
+        font-size: 14px;
+        color: #666;
+        margin: 0;
+      }
+      .modal-body {
+        padding: 24px;
+      }
+      .form-group {
+        margin-bottom: 20px;
+      }
+      .form-label {
+        display: block;
+        font-size: 14px;
+        font-weight: 500;
+        margin-bottom: 8px;
+        color: #333;
+      }
+      .radio-group {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .radio-option {
+        display: flex;
+        align-items: flex-start;
+        padding: 12px;
+        border: 2px solid #e0e0e0;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .radio-option:hover {
+        border-color: #667eea;
+        background: #f5f7ff;
+      }
+      .radio-option input[type="radio"] {
+        margin-right: 12px;
+        margin-top: 2px;
+      }
+      .radio-option-content {
+        flex: 1;
+      }
+      .radio-option-title {
+        font-weight: 500;
+        margin-bottom: 2px;
+      }
+      .radio-option-desc {
+        font-size: 13px;
+        color: #666;
+      }
+      .input-field {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: inherit;
+      }
+      .input-field:focus {
+        outline: none;
+        border-color: #667eea;
+      }
+      .select-field {
+        width: 100%;
+        padding: 10px 12px;
+        border: 1px solid #e0e0e0;
+        border-radius: 6px;
+        font-size: 14px;
+        font-family: inherit;
+        background: white;
+      }
+      .modal-footer {
+        padding: 16px 24px;
+        border-top: 1px solid #e0e0e0;
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+      }
+      .btn {
+        padding: 10px 20px;
+        border: none;
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .btn-secondary {
+        background: #f5f5f5;
+        color: #333;
+      }
+      .btn-secondary:hover {
+        background: #e0e0e0;
+      }
+      .btn-primary {
+        background: #667eea;
+        color: white;
+      }
+      .btn-primary:hover {
+        background: #5568d3;
+      }
+      /* Publish Progress */
+      .publish-progress-container {
+        padding: 24px;
+      }
+      .progress-bar-container {
+        margin-bottom: 24px;
+      }
+      .progress-bar-bg {
+        height: 8px;
+        background: #e0e0e0;
+        border-radius: 4px;
+        overflow: hidden;
+        margin-bottom: 8px;
+      }
+      .progress-bar-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
+        transition: width 0.3s;
+        border-radius: 4px;
+      }
+      .progress-text {
+        font-size: 13px;
+        color: #666;
+        text-align: center;
+      }
+      .progress-steps {
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+      }
+      .progress-step {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        background: #f5f5f5;
+        border-radius: 8px;
+      }
+      .progress-step.completed {
+        background: #e8f5e9;
+      }
+      .progress-step.failed {
+        background: #ffebee;
+      }
+      .step-icon {
+        font-size: 18px;
+      }
+      .step-message {
+        flex: 1;
+        font-size: 14px;
+      }
+      .publish-error {
+        text-align: center;
+        padding: 40px 24px;
+      }
+      .error-icon {
+        font-size: 48px;
+        margin-bottom: 16px;
+        color: #d32f2f;
+      }
+      .error-message {
+        font-size: 14px;
+        color: #666;
+        margin-bottom: 24px;
+      }
+      /* Smooth transitions for lists */
+      .blocks-list,
+      .editor-content {
+        transition: opacity 0.2s ease;
+      }
+      /* Template Editor Styles */
+      .template-editor {
+        padding: 0;
+      }
+      .template-info {
+        padding: 16px;
+        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+        color: white;
+        border-radius: 8px;
+        margin-bottom: 20px;
+      }
+      .template-info-badge {
+        display: inline-block;
+        background: rgba(255,255,255,0.2);
+        padding: 4px 10px;
+        border-radius: 12px;
+        font-size: 11px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        margin-bottom: 8px;
+      }
+      .template-info-desc {
+        margin: 0;
+        font-size: 13px;
+        opacity: 0.9;
+        line-height: 1.5;
+      }
+      .template-section {
+        margin-bottom: 24px;
+      }
+      .template-section-title {
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.5px;
+        color: #666;
+        margin: 0 0 12px 0;
+        padding-bottom: 8px;
+        border-bottom: 1px solid #eee;
+      }
+      .template-pages-list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+      .template-page-item {
+        padding: 12px 16px;
+        background: #f8f9fa;
+        border: 1px solid #e9ecef;
+        border-radius: 8px;
+        cursor: pointer;
+        transition: all 0.2s;
+      }
+      .template-page-item:hover {
+        background: #e9ecef;
+        border-color: #667eea;
+      }
+      .template-page-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        margin-bottom: 4px;
+      }
+      .template-page-name {
+        font-weight: 500;
+        font-size: 14px;
+        color: #333;
+      }
+      .template-page-blocks {
+        font-size: 11px;
+        color: #666;
+        background: #e9ecef;
+        padding: 2px 8px;
+        border-radius: 10px;
+      }
+      .template-page-slug {
+        font-size: 12px;
+        color: #999;
+        font-family: monospace;
+      }
+      .template-layout-slot {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 14px;
+        background: #f8f9fa;
+        border-radius: 6px;
+        margin-bottom: 8px;
+      }
+      .slot-type {
+        font-size: 12px;
+        font-weight: 500;
+        text-transform: capitalize;
+        color: #667eea;
+      }
+      .slot-block {
+        font-size: 12px;
+        color: #666;
+        font-family: monospace;
+      }
+      .template-hint {
+        padding: 12px;
+        background: #fff3cd;
+        border-radius: 6px;
+        margin-top: 20px;
+      }
+      .template-hint p {
+        margin: 0;
+        font-size: 12px;
+        color: #856404;
+      }
+      /* Template preview style */
+      .template-preview {
+        background: #1a1a2e;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="container" id="container">
+      <!-- Left Panel: Blocks List -->
+      <div class="blocks-panel">
+        <div class="blocks-header">
+          <div class="blocks-header-content">
+            <h1>📦 Blocks</h1>
+            <p id="blocks-count">Loading...</p>
+          </div>
+          <button
+            class="panel-toggle"
+            id="toggle-left"
+            onclick="toggleLeftPanel()"
+            title="Collapse panel (Ctrl+B)"
+            aria-label="Toggle blocks panel"
+          >
+            <div class="panel-toggle-icon">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </button>
+        </div>
+        <!-- Filters Section -->
+        <div class="blocks-filters" id="blocks-filters">
+          <input
+            type="search"
+            class="search-input"
+            id="search-input"
+            placeholder="Search blocks..."
+            oninput="handleSearchInput(event)"
+          />
+          <div class="filter-tabs">
+            <button class="filter-tab active" data-type="all" onclick="setTypeFilter('all')">All</button>
+            <button class="filter-tab" data-type="block" onclick="setTypeFilter('block')">Blocks</button>
+            <button class="filter-tab" data-type="template" onclick="setTypeFilter('template')">Templates</button>
+          </div>
+          <div class="filter-row">
+            <select class="filter-select" id="category-filter" onchange="setCategoryFilter(this.value)">
+              <option value="">All Categories</option>
+            </select>
+          </div>
+          <div class="tags-filter" id="tags-filter">
+            <!-- Tags will be populated dynamically -->
+          </div>
+        </div>
+        <div class="blocks-list" id="blocks-list">
+          <div class="loading">
+            <div class="spinner"></div>
+            <span>Loading blocks...</span>
+          </div>
+        </div>
+      </div>
+      <!-- Center Panel: Preview -->
+      <div class="preview-panel">
+        <div class="preview-header">
+          <div class="preview-info">
+            <div class="preview-title" id="preview-title">Preview</div>
+          </div>
+          <div class="preview-actions">
+            <div class="preview-badge" id="preview-status">Ready</div>
+            <button
+              class="btn-publish"
+              onclick="openPublishModal()"
+              style="display: none"
+              id="publish-btn"
+            >
+              📦 Publish
+            </button>
+          </div>
+        </div>
+        <div class="preview-content" id="preview-content">
+          <div class="preview-empty">
+            <div class="preview-empty-icon">👈</div>
+            <p>Select a block to preview</p>
+          </div>
+        </div>
+      </div>
+      <!-- Right Panel: Editor -->
+      <div class="editor-panel">
+        <div class="editor-header">
+          <button
+            class="panel-toggle"
+            id="toggle-right"
+            onclick="toggleRightPanel()"
+            title="Collapse panel (Ctrl+E)"
+            aria-label="Toggle properties panel"
+          >
+            <div class="panel-toggle-icon">
+              <span></span>
+              <span></span>
+              <span></span>
+            </div>
+          </button>
+          <div class="editor-header-content">
+            <h2>⚙️ Properties</h2>
+            <p id="editor-subtitle">No block selected</p>
+          </div>
+        </div>
+        <div class="editor-content" id="editor-content">
+          <div class="editor-empty">Select a block to edit its properties</div>
+        </div>
+      </div>
+    </div>
+    <!-- Publish Modal -->
+    <div class="modal" id="publish-modal">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>Publish <span id="publish-block-name"></span></h3>
+          <p style="margin: 0;">Local version: <span id="publish-local-version"></span></p>
+          <p id="publish-published-version-row" style="margin: 0; color: #666; font-size: 13px; display: none;">
+            Published: <span id="publish-published-version"></span>
+          </p>
+        </div>
+        <!-- Publish Form -->
+        <div id="publish-form">
+          <div class="modal-body">
+            <!-- Target Selection -->
+            <div class="form-group">
+              <label class="form-label">Publish Target</label>
+              <div class="radio-group">
+                <label class="radio-option">
+                  <input
+                    type="radio"
+                    name="publish-target"
+                    value="marketplace"
+                    id="publish-target-marketplace"
+                    onchange="toggleWorkspaceInput()"
+                    checked
+                  />
+                  <div class="radio-option-content">
+                    <div class="radio-option-title">
+                      📋 Marketplace (Public)
+                    </div>
+                    <div class="radio-option-desc">
+                      Submit for review, available to everyone after approval
+                    </div>
+                  </div>
+                </label>
+                <label class="radio-option">
+                  <input
+                    type="radio"
+                    name="publish-target"
+                    value="workspace"
+                    id="publish-target-workspace"
+                    onchange="toggleWorkspaceInput()"
+                  />
+                  <div class="radio-option-content">
+                    <div class="radio-option-title">🏢 Workspace (Private)</div>
+                    <div class="radio-option-desc">
+                      Publish instantly to your workspace, no review needed
+                    </div>
+                  </div>
+                </label>
+              </div>
+            </div>
+            <!-- Workspace Select (conditional) -->
+            <div
+              class="form-group"
+              id="workspace-id-group"
+              style="display: none"
+            >
+              <label class="form-label" for="publish-workspace-id"
+                >Select Workspace</label
+              >
+              <select class="select-field" id="publish-workspace-id" onchange="handleWorkspaceChange()">
+                <option value="">Loading workspaces...</option>
+              </select>
+              <div
+                id="workspace-error"
+                style="
+                  display: none;
+                  color: #e53e3e;
+                  font-size: 12px;
+                  margin-top: 4px;
+                "
+              >
+                Failed to load workspaces. Check your API token configuration.
+              </div>
+            </div>
+            <!-- Version Bump -->
+            <div class="form-group">
+              <label class="form-label" for="publish-version-bump"
+                >Version Bump (Optional)</label
+              >
+              <select class="select-field" id="publish-version-bump">
+                <option value="">No change</option>
+                <option value="patch">Patch (1.0.0 → 1.0.1)</option>
+                <option value="minor">Minor (1.0.0 → 1.1.0)</option>
+                <option value="major">Major (1.0.0 → 2.0.0)</option>
+              </select>
+            </div>
+          </div>
+          <div class="modal-footer">
+            <button class="btn btn-secondary" onclick="closePublishModal()">
+              Cancel
+            </button>
+            <button class="btn btn-primary" onclick="startPublish()">
+              Publish
+            </button>
+          </div>
+        </div>
+        <!-- Publish Progress -->
+        <div id="publish-progress" style="display: none">
+          <div class="publish-progress-container">
+            <div class="progress-bar-container">
+              <div class="progress-bar-bg">
+                <div
+                  class="progress-bar-fill"
+                  id="publish-progress-bar"
+                  style="width: 0%"
+                ></div>
+              </div>
+              <div class="progress-text" id="publish-progress-text">0%</div>
+            </div>
+            <div class="progress-steps" id="publish-steps">
+              <!-- Steps will be dynamically added here -->
+            </div>
+            <div style="text-align: center; margin-top: 24px">
+              <button
+                class="btn btn-primary"
+                onclick="closePublishModal()"
+                id="publish-close-btn"
+                style="display: none"
+              >
+                Done
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <script src="/dev-ui/app.js"></script>
+  </body>
+</html>