zerocodejs 1.0.1-beta.1 → 1.0.1-beta.10

package/dist/js/common.js

@@ -1,1093 +0,0 @@
-/**
- * ZeroCode.js - 共通JavaScript
- * サンプルデータとセッションストレージ管理
- */
-
-// セッションストレージのキー
-const STORAGE_KEYS = {
-  PAGE: 'zcode-page',
-  CSS_COMMON: 'zcode-css-common',
-  CSS_INDIVIDUAL: 'zcode-css-individual',
-  CSS_SPECIAL: 'zcode-css-special',
-  PARTS_COMMON: 'zcode-parts-common',
-  PARTS_INDIVIDUAL: 'zcode-parts-individual',
-  PARTS_SPECIAL: 'zcode-parts-special',
-  IMAGES_COMMON: 'zcode-images-common',
-  IMAGES_INDIVIDUAL: 'zcode-images-individual',
-  IMAGES_SPECIAL: 'zcode-images-special'
-};
-
-// サンプルデータ（index.htmlから抽出）
-const SAMPLE_DATA = {
-  cssCommon: '',
-  cssIndividual: '',
-  cssSpecial: `
-.banner {
-  width: 100%;
-  margin: 0 auto;
-  padding: 20px;
-  border: 1px solid var(--c-color-gray-2);
-  border-radius: var(--c-radius);
-  background: var(--c-color-white);
-  box-shadow: var(--c-shadow);
-}
-
-.banner img {
-  width: 100%;
-  height: auto;
-  display: block;
-}
-
-.banner__text {
-  margin-top: 12px;
-  color: var(--c-color-gray);
-  font-size: 14px;
-  line-height: 1.75;
-  text-align: center;
-}
-`,
-  page: [
-    {
-      id: 'kv-1',
-      part_id: 'zcode-part-layout-kv',
-      hero_image: 'img-sample-1',
-      hero_image_alt: '店舗キービジュアル'
-    },
-    {
-      id: 'section-message-1',
-      part_id: 'zcode-part-layout-section',
-      title: 'メッセージ',
-      subtitle: 'Message',
-      show_subtitle: true,
-      slots: {
-        contents: [
-          {
-            id: 'message-1',
-            part_id: 'zcode-part-message',
-            text: '<p>私たちは、地域に根ざしたサービスで、お客様の体験をより良くします。</p><p>店舗ごとの強みや最新情報を、わかりやすく発信します。</p>'
-          }
-        ]
-      }
-    },
-    {
-      id: 'section-features-1',
-      part_id: 'zcode-part-layout-section',
-      title: 'サービスの特徴',
-      subtitle: 'Features',
-      show_subtitle: true,
-      slots: {
-        contents: [
-          {
-            id: 'numbered-1',
-            part_id: 'zcode-part-numbered',
-            slots: {
-              items: [
-                {
-                  id: 'feature-1',
-                  part_id: 'zcode-part-numbered-item',
-                  title: '品揃えが豊富',
-                  text: '<p>定番から最新トレンドまで、幅広いラインナップをご用意しています。季節に合わせた商品の入れ替えも迅速で、常に新鮮な選択肢をお届けします。お客様の様々なニーズにお応えできるよう、多様なカテゴリーから厳選したアイテムを取り揃えています。</p>'
-                },
-                {
-                  id: 'feature-2',
-                  part_id: 'zcode-part-numbered-item',
-                  title: '充実のサポート',
-                  text: '<p>はじめての方でも、スタッフが丁寧にご案内します。お客様一人ひとりに寄り添ったサービスを心がけており、ご質問やご相談にも迅速に対応いたします。専門知識を持ったスタッフが、最適なソリューションをご提案させていただきます。</p>'
-                },
-                {
-                  id: 'feature-3',
-                  part_id: 'zcode-part-numbered-item',
-                  title: 'アクセス良好',
-                  text: '<p>駅から近く、来店しやすい立地です。主要な交通機関から徒歩圏内にあり、お車でのご来店も可能です。駐車場も完備しており、お買い物やご相談の際にも安心してお越しいただけます。周辺には商業施設も充実しており、お立ち寄りの際にも便利です。</p>'
-                }
-              ]
-            }
-          }
-        ]
-      }
-    },
-    {
-      id: 'section-events-1',
-      part_id: 'zcode-part-layout-section',
-      title: 'イベント情報',
-      subtitle: 'Events',
-      show_subtitle: true,
-      slots: {
-        contents: [
-          {
-            id: 'event-1',
-            part_id: 'zcode-part-event',
-            slots: {
-              items: [
-                {
-                  id: 'event-item-1',
-                  part_id: 'zcode-part-event-item',
-                  date: '2026.01.15',
-                  title: 'シーズンキャンペーン',
-                  text: '<p>期間限定の特典をご用意しています。この機会にぜひご利用ください。新規のお客様には特別な割引も適用され、お得にお買い物をお楽しみいただけます。キャンペーン期間中は、通常のサービスに加えて追加の特典もご用意しております。詳細については、店舗スタッフまでお気軽にお問い合わせください。</p>',
-                  tags: true,
-                  slots: {
-                    tags: [
-                      {
-                        id: 'tag-1',
-                        part_id: 'zcode-part-tag',
-                        text: 'フェア'
-                      }
-                    ]
-                  }
-                },
-                {
-                  id: 'event-item-2',
-                  part_id: 'zcode-part-event-item',
-                  date: '2026.02.01',
-                  title: 'ご相談会',
-                  text: '<p>ご希望やお悩みをヒアリングして最適な提案をします。専門スタッフがお客様の状況を詳しくお聞きし、一人ひとりに合わせたプランをご提案いたします。事前予約制となっており、ゆっくりとご相談いただけます。お気軽にご参加ください。当日はお飲み物もご用意しておりますので、リラックスしてお話しいただけます。</p>',
-                  tags: true,
-                  slots: {
-                    tags: [
-                      {
-                        id: 'tag-2',
-                        part_id: 'zcode-part-tag',
-                        text: '相談会'
-                      }
-                    ]
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      }
-    },
-    {
-      id: 'section-info-1',
-      part_id: 'zcode-part-layout-section',
-      title: '店舗情報',
-      subtitle: 'Store Information',
-      show_subtitle: true,
-      slots: {
-        contents: [
-          {
-            id: 'info-1',
-            part_id: 'zcode-part-info',
-            slots: {
-              items: [
-                {
-                  id: 'info-item-1',
-                  part_id: 'zcode-part-info-item',
-                  label: '住所',
-                  value: '東京都〇〇区〇〇 1-2-3'
-                },
-                {
-                  id: 'info-item-2',
-                  part_id: 'zcode-part-info-item',
-                  label: '営業時間',
-                  value: '10:00〜19:00'
-                },
-                {
-                  id: 'info-item-3',
-                  part_id: 'zcode-part-info-item',
-                  label: '定休日',
-                  value: '水曜'
-                },
-                {
-                  id: 'info-item-4',
-                  part_id: 'zcode-part-info-item',
-                  label: '電話',
-                  value: '03-0000-0000'
-                },
-                {
-                  id: 'info-item-5',
-                  part_id: 'zcode-part-info-item',
-                  label: 'アクセス',
-                  value: '〇〇駅 徒歩5分'
-                }
-              ]
-            }
-          }
-        ]
-      }
-    },
-    {
-      id: 'section-faq-1',
-      part_id: 'zcode-part-layout-section',
-      title: 'よくある質問',
-      subtitle: 'FAQ',
-      show_subtitle: true,
-      slots: {
-        contents: [
-          {
-            id: 'faq-1',
-            part_id: 'zcode-part-faq',
-            slots: {
-              items: [
-                {
-                  id: 'faq-item-1',
-                  part_id: 'zcode-part-faq-item',
-                  question: '予約は必要ですか？',
-                  answer:
-                    '<p>基本的には予約なしでもご利用いただけますが、混雑状況によってはお待ちいただく場合があります。確実にご案内するため、事前予約をおすすめします。</p>'
-                },
-                {
-                  id: 'faq-item-2',
-                  part_id: 'zcode-part-faq-item',
-                  question: '支払い方法は何がありますか？',
-                  answer:
-                    '<p>現金・主要クレジットカード・各種QR決済に対応しています。法人のお客様向けに請求書払いのご相談も可能です。</p>'
-                },
-                {
-                  id: 'faq-item-3',
-                  part_id: 'zcode-part-faq-item',
-                  question: '当日の持ち物はありますか？',
-                  answer:
-                    '<p>特別な持ち物は不要です。必要に応じて、本人確認書類やご希望内容が分かるメモがあるとスムーズです。</p>'
-                }
-              ]
-            }
-          }
-        ]
-      }
-    }
-  ],
-  typesCommon: [
-    {
-      id: 'zcode-common-heading',
-      type: 'heading',
-      description: '見出し',
-      parts: [
-        {
-          id: 'zcode-part-heading-h1',
-          title: 'heading_h1',
-          description: '見出し（H1）',
-          body: `<div class="c-heading c-heading--h1">
-  <h1 class="c-heading__title" z-tag="$tag:h1|h2|h3|h4|h5|h6">{$text:見出し}</h1>
-</div>`
-        },
-        {
-          id: 'zcode-part-heading-h2',
-          title: 'heading_h2',
-          description: '見出し（H2）',
-          body: `<div class="c-heading c-heading--h2">
-  <h2 class="c-heading__title" z-tag="$tag:h1|h2|h3|h4|h5|h6">{$text:見出し}</h2>
-</div>`
-        },
-        {
-          id: 'zcode-part-heading-h3',
-          title: 'heading_h3',
-          description: '見出し（H3）',
-          body: `<div class="c-heading c-heading--h3">
-  <h3 class="c-heading__title" z-tag="$tag:h1|h2|h3|h4|h5|h6">{$text:見出し}</h3>
-</div>`
-        },
-        {
-          id: 'zcode-part-heading-h4',
-          title: 'heading_h4',
-          description: '見出し（H4）',
-          body: `<div class="c-heading c-heading--h4">
-  <h4 class="c-heading__title" z-tag="$tag:h1|h2|h3|h4|h5|h6">{$text:見出し}</h4>
-</div>`
-        },
-        {
-          id: 'zcode-part-heading-h5',
-          title: 'heading_h5',
-          description: '見出し（H5）',
-          body: `<div class="c-heading c-heading--h5">
-  <h5 class="c-heading__title" z-tag="$tag:h1|h2|h3|h4|h5|h6">{$text:見出し}</h5>
-</div>`
-        },
-        {
-          id: 'zcode-part-heading-h6',
-          title: 'heading_h6',
-          description: '見出し（H6）',
-          body: `<div class="c-heading c-heading--h6">
-  <h6 class="c-heading__title" z-tag="$tag:h1|h2|h3|h4|h5|h6">{$text:見出し}</h6>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-common-text',
-      type: 'text',
-      description: '文章',
-      parts: [
-        {
-          id: 'zcode-part-text',
-          title: 'text',
-          description: '文章（リッチテキスト）',
-          body: `<div class="c-text">{$text:本文を入力してください:rich}</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-common-box',
-      type: 'box',
-      description: 'ボックス',
-      parts: [
-        {
-          id: 'zcode-part-box',
-          title: 'box',
-          description: 'ボックス（見出し＋文章）',
-          body: `<div class="c-box c-box--tone-($tone.style:neutral|primary|accent)">
-  <div class="c-box__inner">
-    <div class="c-box__heading">{$heading.content:ボックス見出し}</div>
-    <div class="c-box__body">{$text.content:ボックス本文:rich}</div>
-  </div>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-common-media',
-      type: 'media',
-      description: 'メディア（画像＋コンテンツ）',
-      parts: [
-        {
-          id: 'zcode-part-media',
-          title: 'media',
-          description: '画像とコンテンツの横並び',
-          body: `<div class="c-media c-media--dir-($dir.layout:normal|reverse) c-media--valign-($valign.layout:top|center|bottom)">
-  <div class="c-media__image">
-    <img class="c-media__img" src="{$image.image:img-default:image}" alt="{$alt.image:画像の説明}">
-  </div>
-  <div class="c-media__content">
-    <div class="c-media__heading">{$heading.content:見出し}</div>
-    <div class="c-media__text">{$text.content:本文:rich}</div>
-    <div class="c-media__actions">
-      <a class="c-button c-button--style-($style.action:primary|secondary|text)" href="{$href.action:#}">{$label.action:詳しく見る}</a>
-    </div>
-  </div>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-common-image',
-      type: 'image',
-      description: '画像',
-      parts: [
-        {
-          id: 'zcode-part-image',
-          title: 'image',
-          description: '画像',
-          body: `<div class="c-image c-image--align-($align.layout:left|center|right)">
-  <div class="c-image__media">
-    <img class="c-image__img" src="{$image.image:img-default:image}" alt="{$alt.image:画像の説明}">
-  </div>
-  <div class="c-image__caption">{$caption.caption:キャプション}</div>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-common-table',
-      type: 'table',
-      description: '表組',
-      parts: [
-        {
-          id: 'zcode-part-table',
-          title: 'table',
-          description: '表（ヘッダー/行はスロット）',
-          slots: {
-            header_cells: { allowedParts: ['zcode-part-table-header-cell'] },
-            rows: { allowedParts: ['zcode-part-table-row'] }
-          },
-          body: `<div class="c-table c-table--style-($style.style:plain|striped|bordered)" role="table">
-  <div class="c-table__caption">{$caption.info:表の説明}</div>
-  <div class="c-table__header" role="rowgroup">
-    <div class="c-table__row" role="row" z-slot="header_cells"></div>
-  </div>
-  <div class="c-table__body" role="rowgroup" z-slot="rows"></div>
-</div>`
-        },
-        {
-          id: 'zcode-part-table-header-cell',
-          title: 'table_header_cell',
-          description: 'ヘッダーセル',
-          slotOnly: true,
-          body: `<div class="c-table__cell c-table__cell--head c-table__cell--align-($align.layout:left|center|right)" role="columnheader">{$text.content:見出し}</div>`
-        },
-        {
-          id: 'zcode-part-table-row',
-          title: 'table_row',
-          description: '行',
-          slotOnly: true,
-          slots: {
-            cells: { allowedParts: ['zcode-part-table-cell'] }
-          },
-          body: `<div class="c-table__row" role="row" z-slot="cells"></div>`
-        },
-        {
-          id: 'zcode-part-table-cell',
-          title: 'table_cell',
-          description: 'セル',
-          slotOnly: true,
-          body: `<div class="c-table__cell c-table__cell--align-($align.layout:left|center|right)" role="cell">{$text.content:セル}</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-common-actions',
-      type: 'actions',
-      description: 'リンク/ボタン',
-      parts: [
-        {
-          id: 'zcode-part-button',
-          title: 'button',
-          description: 'ボタン',
-          body: `<div class="c-actions c-actions--align-($align.style:left|center|right)">
-  <a class="c-button c-button--style-($style.style:primary|secondary|text)" href="{$href.action:#}">{$label.action:ボタン}</a>
-</div>`
-        },
-        {
-          id: 'zcode-part-link',
-          title: 'link',
-          description: 'テキストリンク',
-          body: `<a class="c-link" href="{$href:#}">{$text:リンク}</a>`
-        }
-      ]
-    }
-  ],
-  typesIndividual: [
-    {
-      id: 'zcode-individual-layout',
-      type: 'layout',
-      description: 'レイアウト（店舗ページ向け）',
-      parts: [
-        {
-          id: 'zcode-part-layout-kv',
-          title: 'layout_store_kv',
-          description: 'キービジュアルセクション（店舗）',
-          body: `<div class="kv">
-  <div class="kv__image">
-    <img class="kv__img" src="{$hero_image.image:img-sample-1:image}" alt="{$hero_image_alt.image:キービジュアル}">
-  </div>
-</div>`
-        },
-        {
-          id: 'zcode-part-layout-section',
-          title: 'layout_section',
-          description: '共通セクション（見出し + コンテンツ）',
-          slots: {
-            contents: {
-              allowedParts: [
-                'zcode-part-message',
-                'zcode-part-numbered',
-                'zcode-part-event',
-                'zcode-part-info',
-                'zcode-part-faq'
-              ]
-            }
-          },
-          body: `<div class="section">
-  <div class="section__head">
-    <div class="section__title" role="heading" aria-level="2">{$title.header:セクションタイトル}</div>
-    <div class="section__subtitle" z-if="show_subtitle">{$subtitle.header:Subtitle}</div>
-  </div>
-  <div class="section__contents">
-    <div class="section__items" z-slot="contents"></div>
-  </div>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-individual-message',
-      type: 'message',
-      description: 'メッセージ',
-      parts: [
-        {
-          id: 'zcode-part-message',
-          slotOnly: true,
-          body: `<div class="message__text">{$text:メッセージ文:rich}</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-individual-numbered',
-      type: 'numbered',
-      description: '数字付きアイテム',
-      parts: [
-        {
-          id: 'zcode-part-numbered',
-          title: 'numbered',
-          description: '数字付きアイテムリスト',
-          slotOnly: true,
-          slots: {
-            items: { allowedParts: ['zcode-part-numbered-item'] }
-          },
-          body: `<div class="numbered">
-  <div class="numbered__items" z-slot="items"></div>
-</div>`
-        },
-        {
-          id: 'zcode-part-numbered-item',
-          title: 'numbered_item',
-          description: '数字付きアイテム',
-          slotOnly: true,
-          body: `<div class="numbered-item">
-  <div class="numbered-item__number"></div>
-  <div class="numbered-item__title" role="heading" aria-level="3">{$title.content:タイトル}</div>
-  <div class="numbered-item__text">{$text.content:説明:rich}</div>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-individual-event',
-      type: 'event',
-      description: 'イベント',
-      parts: [
-        {
-          id: 'zcode-part-event',
-          title: 'event',
-          description: 'イベントリスト',
-          slotOnly: true,
-          slots: {
-            items: { allowedParts: ['zcode-part-event-item'] }
-          },
-          body: `<div class="event">
-  <div class="event__items" z-slot="items"></div>
-</div>`
-        },
-        {
-          id: 'zcode-part-event-item',
-          title: 'event_item',
-          description: 'イベントアイテム（タグ付き）',
-          slotOnly: true,
-          slots: {
-            tags: { allowedParts: ['zcode-part-tag'] }
-          },
-          body: `<div class="event-item" role="listitem">
-  <div class="event-item__meta">
-    <div class="event-item__date" z-if="show_date">{$date.meta:2026.01.01}</div>
-    <div class="event-item__tags" z-if="show_tags" z-slot="tags"></div>
-  </div>
-  <div class="event-item__title" role="heading" aria-level="3">{$title.content:タイトル}</div>
-  <div class="event-item__text">{$text.content:説明:rich}</div>
-  <div class="event-item__actions" z-if="show_href">
-    <a class="c-link" href="{$href.action:#}">{$label.action:詳細}</a>
-  </div>
-</div>`
-        },
-        {
-          id: 'zcode-part-tag',
-          title: 'tag',
-          description: 'タグ',
-          slotOnly: true,
-          body: `<div class="tag">{$text:タグ}</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-individual-info',
-      type: 'info',
-      description: '情報リスト',
-      parts: [
-        {
-          id: 'zcode-part-info',
-          title: 'info',
-          description: '情報リスト',
-          slotOnly: true,
-          slots: {
-            items: { allowedParts: ['zcode-part-info-item'] }
-          },
-          body: `<div class="info">
-  <div class="info__items" z-slot="items"></div>
-</div>`
-        },
-        {
-          id: 'zcode-part-info-item',
-          title: 'info_item',
-          description: '情報行アイテム',
-          slotOnly: true,
-          body: `<div class="info-item" role="listitem">
-  <div class="info-item__label">{$label.info:ラベル}</div>
-  <div class="info-item__value">{$value.info:値}</div>
-</div>`
-        }
-      ]
-    },
-    {
-      id: 'zcode-individual-faq',
-      type: 'faq',
-      description: 'よくある質問',
-      parts: [
-        {
-          id: 'zcode-part-faq',
-          title: 'faq',
-          description: 'よくある質問（アコーディオン）',
-          slotOnly: true,
-          slots: {
-            items: { allowedParts: ['zcode-part-faq-item'] }
-          },
-          body: `<div class="faq">
-  <div class="faq__items" z-slot="items"></div>
-</div>`
-        },
-        {
-          id: 'zcode-part-faq-item',
-          title: 'faq_item',
-          description: 'FAQアイテム（Q&A）',
-          slotOnly: true,
-          body: `<div class="faq-item js_toggleArea s_close" role="listitem">
-  <button class="faq-item__q js_toggleBtn" type="button" aria-expanded="false">
-    {$question.content:質問}
-  </button>
-  <div class="faq-item__a js_toggleContents" style="display:none">
-    {$answer.content:回答:rich}
-  </div>
-</div>`
-        }
-      ]
-    }
-  ],
-  imagesCommon: [
-    {
-      id: 'img-default',
-      name: 'Default',
-      url: './images/default.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    },
-    {
-      id: 'img-hero-bg',
-      name: 'Hero BG',
-      url: './images/hero-bg.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    },
-    {
-      id: 'img-sample-2',
-      name: 'Sample 2',
-      url: './images/sample-2.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    },
-    {
-      id: 'img-sample-3',
-      name: 'Sample 3',
-      url: './images/sample-3.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    },
-    {
-      id: 'img-page-specific-hero',
-      name: 'Page Specific Hero',
-      url: './images/page-specific-hero.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    },
-    {
-      id: 'img-customer-avatar',
-      name: 'Customer Avatar',
-      url: './images/customer-avatar.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    },
-    {
-      id: 'img-default-avatar',
-      name: 'Default Avatar',
-      url: './images/default-avatar.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    }
-  ],
-  typesSpecial: [
-    {
-      id: 'zcode-special-banner',
-      type: 'banner',
-      description: 'バナー（特別ページ向け）',
-      parts: [
-        {
-          id: 'zcode-part-special-banner',
-          title: 'special_banner',
-          description: '特別バナー（店舗ごとなど）',
-          body: `<div class="banner">
-  <img src="{$banner_image.image:img-special-banner:image}" alt="{$banner_alt.image:バナー}">
-  <div class="banner__text">{$banner_text.content:バナーテキスト}</div>
-</div>`
-        }
-      ]
-    }
-  ],
-  imagesIndividual: [
-    {
-      id: 'img-sample-1',
-      name: 'Sample 1',
-      url: './images/kv_image.jpg',
-      mimeType: 'image/jpeg',
-      needsUpload: false
-    }
-  ],
-  imagesSpecial: [
-    {
-      id: 'img-special-banner',
-      name: 'Special Banner',
-      url: './images/zcode_top_01.png',
-      mimeType: 'image/png',
-      needsUpload: false
-    }
-  ]
-};
-
-// インスタンスIDを取得または生成
-function getInstanceId(component) {
-  // id属性を優先
-  if (component.id) {
-    return component.id;
-  }
-
-  // data-instance-id属性があれば使用
-  const dataInstanceId = component.getAttribute('data-instance-id');
-  if (dataInstanceId) {
-    return dataInstanceId;
-  }
-
-  // 自動生成して属性に設定
-  const instanceId = `zcode-instance-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
-  component.setAttribute('data-instance-id', instanceId);
-  return instanceId;
-}
-
-// ストレージキーを生成
-function getStorageKey(instanceId, key) {
-  return `zcode-${instanceId}-${key}`;
-}
-
-// セッションストレージ管理ユーティリティ
-const StorageManager = {
-  normalizeImageUrl(url) {
-    if (typeof url !== 'string') return url;
-    if (url.startsWith('/images/')) {
-      return `./images/${url.slice('/images/'.length)}`;
-    }
-    return url;
-  },
-
-  normalizeImages(images) {
-    if (!Array.isArray(images)) return images;
-    return images.map((img) => {
-      if (!img || typeof img !== 'object') return img;
-      if (typeof img.url !== 'string') return img;
-      const normalized = this.normalizeImageUrl(img.url);
-      if (normalized === img.url) return img;
-      return { ...img, url: normalized };
-    });
-  },
-
-  // データをローカルストレージに保存（インスタンスID対応）
-  save(instanceId, key, data) {
-    try {
-      const storageKey = getStorageKey(instanceId, key);
-      localStorage.setItem(storageKey, JSON.stringify(data));
-      return true;
-    } catch (e) {
-      console.error(`Failed to save ${key}:`, e);
-      return false;
-    }
-  },
-
-  // ローカルストレージからデータを取得（インスタンスID対応）
-  load(instanceId, key, defaultValue = null) {
-    try {
-      const storageKey = getStorageKey(instanceId, key);
-      const item = localStorage.getItem(storageKey);
-      return item ? JSON.parse(item) : defaultValue;
-    } catch (e) {
-      console.error(`Failed to load ${key}:`, e);
-      return defaultValue;
-    }
-  },
-
-  // ローカルストレージからデータを削除（インスタンスID対応）
-  remove(instanceId, key) {
-    try {
-      const storageKey = getStorageKey(instanceId, key);
-      localStorage.removeItem(storageKey);
-      return true;
-    } catch (e) {
-      console.error(`Failed to remove ${key}:`, e);
-      return false;
-    }
-  },
-
-  // すべてのデータをクリア（インスタンスID対応）
-  clear(instanceId) {
-    const keys = [
-      'page',
-      'css-common',
-      'css-individual',
-      'css-special',
-      'parts-common',
-      'parts-individual',
-      'parts-special',
-      'images-common',
-      'images-individual',
-      'images-special'
-    ];
-    keys.forEach((key) => {
-      this.remove(instanceId, key);
-    });
-  },
-
-  // サンプルデータをセッションストレージに保存（インスタンスID対応）
-  saveSampleData(instanceIdOrComponentId) {
-    // コンポーネントIDが渡された場合はインスタンスIDを取得
-    let instanceId = instanceIdOrComponentId;
-    if (instanceIdOrComponentId) {
-      const component = document.getElementById(instanceIdOrComponentId);
-      if (component) {
-        instanceId = getInstanceId(component);
-      } else {
-        // コンポーネントが見つからない場合は、そのままインスタンスIDとして使用
-        instanceId = instanceIdOrComponentId;
-      }
-    } else {
-      // インスタンスIDが指定されていない場合はデフォルトを使用
-      instanceId = 'default';
-    }
-
-    this.save(instanceId, 'page', SAMPLE_DATA.page);
-    this.save(instanceId, 'css-common', SAMPLE_DATA.cssCommon || '');
-    this.save(instanceId, 'css-individual', SAMPLE_DATA.cssIndividual || '');
-    this.save(instanceId, 'css-special', SAMPLE_DATA.cssSpecial || '');
-    this.save(instanceId, 'parts-common', SAMPLE_DATA.typesCommon);
-    this.save(instanceId, 'parts-individual', SAMPLE_DATA.typesIndividual);
-    this.save(instanceId, 'parts-special', SAMPLE_DATA.typesSpecial || []);
-    this.save(instanceId, 'images-common', SAMPLE_DATA.imagesCommon);
-    this.save(instanceId, 'images-individual', SAMPLE_DATA.imagesIndividual);
-    this.save(instanceId, 'images-special', SAMPLE_DATA.imagesSpecial || []);
-    return true;
-  },
-
-  // セッションストレージからデータを読み込み（インスタンスID対応）
-  loadData(instanceIdOrComponentId) {
-    // コンポーネントIDが渡された場合はインスタンスIDを取得
-    let instanceId = instanceIdOrComponentId;
-    if (instanceIdOrComponentId) {
-      const component = document.getElementById(instanceIdOrComponentId);
-      if (component) {
-        instanceId = getInstanceId(component);
-      } else {
-        // コンポーネントが見つからない場合は、そのままインスタンスIDとして使用
-        instanceId = instanceIdOrComponentId;
-      }
-    } else {
-      // インスタンスIDが指定されていない場合はデフォルトを使用
-      instanceId = 'default';
-    }
-
-    const data = {
-      page: this.load(instanceId, 'page', []),
-      cssCommon: this.load(instanceId, 'css-common', ''),
-      cssIndividual: this.load(instanceId, 'css-individual', ''),
-      cssSpecial: this.load(instanceId, 'css-special', ''),
-      typesCommon: this.load(instanceId, 'parts-common', []),
-      typesIndividual: this.load(instanceId, 'parts-individual', []),
-      typesSpecial: this.load(instanceId, 'parts-special', []),
-      imagesCommon: this.load(instanceId, 'images-common', []),
-      imagesIndividual: this.load(instanceId, 'images-individual', []),
-      imagesSpecial: this.load(instanceId, 'images-special', [])
-    };
-
-    const normalizedCommon = this.normalizeImages(data.imagesCommon);
-    const normalizedIndividual = this.normalizeImages(data.imagesIndividual);
-    const normalizedSpecial = this.normalizeImages(data.imagesSpecial);
-
-    const changed =
-      JSON.stringify(normalizedCommon) !== JSON.stringify(data.imagesCommon) ||
-      JSON.stringify(normalizedIndividual) !== JSON.stringify(data.imagesIndividual) ||
-      JSON.stringify(normalizedSpecial) !== JSON.stringify(data.imagesSpecial);
-
-    if (changed) {
-      data.imagesCommon = normalizedCommon;
-      data.imagesIndividual = normalizedIndividual;
-      data.imagesSpecial = normalizedSpecial;
-      this.save(instanceId, 'images-common', data.imagesCommon);
-      this.save(instanceId, 'images-individual', data.imagesIndividual);
-      this.save(instanceId, 'images-special', data.imagesSpecial || []);
-    }
-
-    return data;
-  },
-
-  // Webコンポーネントにデータを適用（インスタンスID対応）
-  applyToComponent(componentId) {
-    const component = document.getElementById(componentId);
-    if (!component) {
-      console.error(`Component not found: ${componentId}`);
-      return false;
-    }
-
-    const instanceId = getInstanceId(component);
-    const data = this.loadData(instanceId);
-
-    component.setAttribute('page', JSON.stringify(data.page));
-    if (data.cssCommon) {
-      component.setAttribute('css-common', data.cssCommon);
-    }
-    if (data.cssIndividual) {
-      component.setAttribute('css-individual', data.cssIndividual);
-    }
-    if (data.cssSpecial) {
-      component.setAttribute('css-special', data.cssSpecial);
-    }
-    component.setAttribute('parts-common', JSON.stringify(data.typesCommon));
-    component.setAttribute('parts-individual', JSON.stringify(data.typesIndividual));
-    component.setAttribute('parts-special', JSON.stringify(data.typesSpecial || []));
-    component.setAttribute('images-common', JSON.stringify(data.imagesCommon));
-    component.setAttribute('images-individual', JSON.stringify(data.imagesIndividual));
-    component.setAttribute('images-special', JSON.stringify(data.imagesSpecial || []));
-
-    return true;
-  }
-};
-
-// 保存/リセットイベントリスナーを設定
-function setupSaveResetListeners() {
-  // zcode-cmsとzcode-editorの両方に対応
-  const components = document.querySelectorAll('zcode-cms, zcode-editor');
-
-  components.forEach((component) => {
-    // インスタンスIDを取得
-    const instanceId = getInstanceId(component);
-
-    // 保存リクエスト
-    component.addEventListener('save-request', (e) => {
-      const { source } = e.detail;
-      const targets = Array.isArray(e.detail.targets)
-        ? e.detail.targets
-        : typeof e.detail.target === 'string'
-          ? [e.detail.target]
-          : [];
-      const requestId =
-        typeof e.detail.requestId === 'string'
-          ? e.detail.requestId
-          : `req-${Date.now()}-${Math.random().toString(36).slice(2)}`;
-
-      console.debug('[ZeroCodeCommon] save-request received:', { source, targets, requestId });
-
-      if (targets.length === 0) {
-        console.warn('[ZeroCode] No targets specified');
-        return;
-      }
-
-      // ⚠️ 注意: これは補助的な検証です
-      // 完全なセキュリティ保証のためには、サーバー側での検証が必須です
-      if (
-        source === 'cms' &&
-        (targets.includes('parts-common') || targets.includes('parts-individual'))
-      ) {
-        console.warn('[ZeroCode] CMSからはパーツデータの保存はできません');
-        return;
-      }
-
-      const data = component.getData();
-
-      if (!data) {
-        console.warn('[ZeroCode] No data available to save');
-        return;
-      }
-
-      let allSaved = true;
-      for (const target of targets) {
-        let key;
-        let dataToSave;
-        let ok = true;
-        let errors = [];
-
-        switch (target) {
-          case 'page':
-            key = 'page';
-            dataToSave = data.page;
-            break;
-          case 'parts-common-css':
-            key = 'parts-common-css';
-            dataToSave = typeof data.css?.common === 'string' ? data.css.common : '';
-            break;
-          case 'parts-individual-css':
-            key = 'parts-individual-css';
-            dataToSave = typeof data.css?.individual === 'string' ? data.css.individual : '';
-            break;
-          case 'parts-special-css':
-            key = 'parts-special-css';
-            dataToSave = typeof data.css?.special === 'string' ? data.css.special : '';
-            break;
-          case 'parts-common':
-            key = 'parts-common';
-            dataToSave = data.parts?.common || [];
-            break;
-          case 'parts-individual':
-            key = 'parts-individual';
-            dataToSave = data.parts?.individual || [];
-            break;
-          case 'images-common':
-            key = 'images-common';
-            dataToSave = data.images?.common || [];
-            break;
-          case 'images-individual':
-            key = 'images-individual';
-            dataToSave = data.images?.individual || [];
-            break;
-          case 'images-special':
-            key = 'images-special';
-            dataToSave = data.images?.special || [];
-            break;
-          default:
-            console.warn(`[ZeroCode] Unknown save target: ${target}`);
-            allSaved = false;
-            ok = false;
-            errors = [{ message: `Unknown save target: ${target}`, code: 'UNKNOWN_TARGET' }];
-            continue;
-        }
-
-        if (!StorageManager.save(instanceId, key, dataToSave)) {
-          console.error(`[ZeroCode] Failed to save ${target}`);
-          allSaved = false;
-          ok = false;
-          errors = [{ message: `Failed to save ${target}`, code: 'SAVE_FAILED' }];
-        }
-
-        // 保存結果を通知（呼び出し側のバックエンド検証でも同じイベント形式を推奨）
-        console.debug('[ZeroCodeCommon] dispatching save-result:', { requestId, target, ok, errors });
-        const resultEvent = new CustomEvent('save-result', {
-          detail: {
-            requestId,
-            target,
-            ok,
-            errors
-          },
-          bubbles: true,
-          composed: true
-        });
-        component.dispatchEvent(resultEvent);
-      }
-
-      if (allSaved) {
-        const savedEvent = new CustomEvent('zcode-saved', {
-          detail: { targets, instanceId },
-          bubbles: true,
-          composed: true
-        });
-        component.dispatchEvent(savedEvent);
-      }
-    });
-  });
-}
-
-// DOMContentLoaded時にイベントリスナーを設定
-if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', setupSaveResetListeners);
-} else {
-  setupSaveResetListeners();
-}
-
-// グローバルに公開
-window.ZeroCodeCommon = {
-  STORAGE_KEYS,
-  SAMPLE_DATA,
-  StorageManager,
-  setupSaveResetListeners,
-  getInstanceId,
-  getStorageKey
-};