mokkun 0.1.2 → 0.1.3

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 (5) hide show
  1. package/bin/viewer.html +10 -2
  2. package/dist/example.html +2 -2
  3. package/dist/mokkun.esm.js +1 -1
  4. package/dist/mokkun.js +1 -1
  5. package/package.json +1 -1
package/bin/viewer.html CHANGED
@@ -139,7 +139,8 @@
139
139
  <div class="toolbar-spacer"></div>
140
140
 
141
141
  <div class="theme-toggle">
142
- <button id="light-theme" class="active">Light</button>
142
+ <button id="lofi-theme" class="active">Lo-Fi</button>
143
+ <button id="light-theme">Light</button>
143
144
  <button id="dark-theme">Dark</button>
144
145
  </div>
145
146
  </div>
@@ -154,9 +155,10 @@
154
155
  (function() {
155
156
  var mokkunInstance = null;
156
157
  var screenSelect = document.getElementById('screen-select');
158
+ var lofiThemeBtn = document.getElementById('lofi-theme');
157
159
  var lightThemeBtn = document.getElementById('light-theme');
158
160
  var darkThemeBtn = document.getElementById('dark-theme');
159
- var currentTheme = 'light';
161
+ var currentTheme = 'lofi';
160
162
 
161
163
  // YAML URL injected by CLI (or null for sample)
162
164
  var yamlUrl = /* __YAML_URL__ */ null;
@@ -165,11 +167,17 @@
165
167
  function setTheme(theme) {
166
168
  currentTheme = theme;
167
169
  document.body.classList.toggle('dark-theme', theme === 'dark');
170
+ document.documentElement.setAttribute('data-theme', theme);
171
+ lofiThemeBtn.classList.toggle('active', theme === 'lofi');
168
172
  lightThemeBtn.classList.toggle('active', theme === 'light');
169
173
  darkThemeBtn.classList.toggle('active', theme === 'dark');
170
174
  if (mokkunInstance) mokkunInstance.setTheme(theme);
171
175
  }
172
176
 
177
+ // Set initial theme
178
+ document.documentElement.setAttribute('data-theme', 'lofi');
179
+
180
+ lofiThemeBtn.addEventListener('click', function() { setTheme('lofi'); });
173
181
  lightThemeBtn.addEventListener('click', function() { setTheme('light'); });
174
182
  darkThemeBtn.addEventListener('click', function() { setTheme('dark'); });
175
183
 
package/dist/example.html CHANGED
@@ -3,7 +3,7 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Mokkun v0.1.2 - Example</title>
6
+ <title>Mokkun v0.1.3 - Example</title>
7
7
  <!-- Load Mokkun CSS -->
8
8
  <link rel="stylesheet" href="./mokkun.css">
9
9
  <style>
@@ -59,7 +59,7 @@
59
59
  <body>
60
60
  <div id="mokkun-app">
61
61
  <div class="demo-header">
62
- <h1>Mokkun v0.1.2</h1>
62
+ <h1>Mokkun v0.1.3</h1>
63
63
  <p>YAML-based Presentation & Form Builder</p>
64
64
  </div>
65
65
  <div class="demo-controls">
package/dist/mokkun.esm.js CHANGED
@@ -12473,7 +12473,7 @@ async function Xr(t) {
12473
12473
  throw (a = t.onError) == null || a.call(t, o), o;
12474
12474
  }
12475
12475
  }
12476
- const eo = "0.1.2", to = {
12476
+ const eo = "0.1.3", to = {
12477
12477
  /** Initialize Mokkun */
12478
12478
  init: Xr,
12479
12479
  /** Library version */
package/dist/mokkun.js CHANGED
@@ -699,5 +699,5 @@
699
699
  `}function Or(t,e){if(!e.sections||e.sections.length===0)return null;const i=t.querySelector("#section-nav-container");if(!i)return null;const n=e.sections.map((a,r)=>({id:Ai(a.section_name,r),label:a.section_name,icon:a.icon})),s=new yi({sections:n,scrollOffset:120,mobileMode:"scroll",stickyTop:"60px"},i);return s.render(),{getActiveSection:()=>s.getActiveSection(),scrollToSection:a=>s.scrollToSection(a),destroy:()=>s.destroy()}}function Hr(t,e,i=0){let n=i;function s(){t.innerHTML=Ei(e,n),a()}function a(){t.querySelectorAll(".wizard-next").forEach(r=>{r.addEventListener("click",()=>{e.wizard&&n<e.wizard.steps.length-1&&(n++,s())})}),t.querySelectorAll(".wizard-back").forEach(r=>{r.addEventListener("click",()=>{n>0&&(n--,s())})})}return s(),{getCurrentStep:()=>n,goToStep:r=>{e.wizard&&r>=0&&r<e.wizard.steps.length&&(n=r,s())},nextStep:()=>{e.wizard&&n<e.wizard.steps.length-1&&(n++,s())},prevStep:()=>{n>0&&(n--,s())}}}class zr{constructor(e,i={},n=new Map){h(this,"container");h(this,"callbacks");h(this,"deleteConfirmConfigs");h(this,"boundClickHandler");this.container=e,this.callbacks=i,this.deleteConfirmConfigs=n,this.boundClickHandler=this.handleClick.bind(this)}attach(){this.container.addEventListener("click",this.boundClickHandler)}detach(){this.container.removeEventListener("click",this.boundClickHandler)}registerDeleteConfirmConfig(e,i){this.deleteConfirmConfigs.set(e,i)}handleClick(e){const n=e.target.closest("[data-action-id]");if(!n)return;const s=n.dataset.actionId,a=n.dataset.actionType;if(!s||!a)return;const r=n.dataset.confirmTitle,o=n.dataset.confirmMessage;if(r&&o){e.preventDefault(),this.showConfirmDialog(n,s,a,r,o);return}this.executeAction(n,s,a)}async showConfirmDialog(e,i,n,s,a){const r=this.deleteConfirmConfigs.get(i);let o;if(r!=null&&r.getDependencies){const u=r.getDependencies();o=u instanceof Promise?await u:u}let l=a;r!=null&&r.getTargetName&&(l=r.getTargetName());const d={title:s,targetName:l,targetType:r==null?void 0:r.targetType,dependencies:o,warningMessage:r==null?void 0:r.warningMessage,danger:!0};new Ci(d,{onConfirm:()=>{this.executeAction(e,i,n)},onCancel:()=>{var u,f;(f=(u=this.callbacks).onCancel)==null||f.call(u,i)}}).open()}executeAction(e,i,n){var s,a,r,o,l,d,p,u;switch(n){case"submit":{const f=e.dataset.url,g=e.dataset.method;(a=(s=this.callbacks).onSubmit)==null||a.call(s,i,f,g);break}case"navigate":{const f=e.dataset.navigateTo;f&&((o=(r=this.callbacks).onNavigate)==null||o.call(r,i,f));break}case"custom":{const f=e.dataset.handler;f&&((d=(l=this.callbacks).onCustom)==null||d.call(l,i,f));break}case"reset":{(u=(p=this.callbacks).onReset)==null||u.call(p,i);break}}}}function Br(t,e={},i){const n=new zr(t,e,i);return n.attach(),n}const Si=[".yaml",".yml"],Li=["https:","http:"];function Rr(t){const e=t.toLowerCase();return Si.some(i=>e.endsWith(i))}function Pr(t){return{type:"INVALID_FILE_TYPE",message:`無効なファイル形式: ${t}`,details:`YAMLファイル（${Si.join(", ")}）のみ対応しています`}}function Vr(t,e,i){const n=Ue(t);return n.success?{success:!0,schema:n.data,fileName:e,source:i}:{success:!1,error:{type:"YAML_PARSE_ERROR",message:"YAMLのパースに失敗しました",details:ba(n.errors),parseErrors:n.errors}}}async function jr(t){const e=new URL(t,window.location.href),i=e.pathname.split("/"),n=i[i.length-1]||"unknown.yaml";if(!Li.includes(e.protocol))return{success:!1,error:{type:"FETCH_ERROR",message:"無効なURLプロトコル",details:`許可されているプロトコル: ${Li.join(", ")}`}};if(!Rr(n))return{success:!1,error:Pr(n)};try{const s=await fetch(t);if(!s.ok)return{success:!1,error:{type:"FETCH_ERROR",message:`ファイルの取得に失敗しました: ${t}`,details:`HTTPステータス: ${s.status} ${s.statusText}`}};const a=await s.text();return Vr(a,n,"url")}catch(s){const a=s instanceof Error?s.message:String(s);return{success:!1,error:{type:"NETWORK_ERROR",message:`ネットワークエラー: ${t}`,details:a}}}}const Xe="mokkun-theme",$i="data-theme",et="mokkun-theme-change",Ur=[{id:"lofi",name:"ローファイ",description:"ワイヤフレーム風のスケッチスタイル",isBuiltIn:!0},{id:"light",name:"ライト",description:"デフォルトの明るいテーマ",isBuiltIn:!0},{id:"dark",name:"ダーク",description:"目に優しいダークテーマ",isBuiltIn:!0}],tt="lofi";class qr{constructor(){h(this,"themes");h(this,"currentThemeId");h(this,"config");h(this,"customStyleElement");this.themes=new Map,this.currentThemeId=null,this.config=null,this.customStyleElement=null,Ur.forEach(e=>{this.themes.set(e.id,e)})}initialize(){var n;const e=this.getSavedTheme(),i=e&&this.themes.has(e)?e:((n=this.config)==null?void 0:n.default_theme)??tt;this.applyTheme(i)}loadConfig(e){try{this.config=ai(e),this.config.custom_themes&&this.config.custom_themes.forEach(i=>{const n={id:i.id,name:i.name,description:i.description,isBuiltIn:!1,cssVariables:i.css_variables};this.themes.set(n.id,n)})}catch(i){console.error("Failed to load theme config:",i)}}getAvailableThemes(){return Array.from(this.themes.values())}getCurrentTheme(){return this.currentThemeId}getTheme(e){return this.themes.get(e)}hasTheme(e){return this.themes.has(e)}applyTheme(e){const i=this.themes.get(e);if(!i)return console.warn(`Theme not found: ${e}`),!1;const n=this.currentThemeId;return document.documentElement.setAttribute($i,e),!i.isBuiltIn&&i.cssVariables?this.applyCustomVariables(i.cssVariables):this.removeCustomVariables(),this.currentThemeId=e,this.saveTheme(e),this.dispatchThemeChangeEvent(n,e),!0}applyCustomVariables(e){this.removeCustomVariables();const i=Object.entries(e).map(([s,a])=>` ${s}: ${a};`).join(`
700
700
  `),n=`[${$i}] {
701
701
  ${i}
702
- }`;this.customStyleElement=document.createElement("style"),this.customStyleElement.id="mokkun-custom-theme",this.customStyleElement.textContent=n,document.head.appendChild(this.customStyleElement)}removeCustomVariables(){this.customStyleElement&&(this.customStyleElement.remove(),this.customStyleElement=null)}registerTheme(e){this.themes.set(e.id,{...e,isBuiltIn:!1})}unregisterTheme(e){const i=this.themes.get(e);return!i||i.isBuiltIn?!1:(this.themes.delete(e),this.currentThemeId===e&&this.applyTheme(tt),!0)}saveTheme(e){try{localStorage.setItem(Xe,e)}catch(i){console.warn("Failed to save theme preference:",i)}}getSavedTheme(){try{return localStorage.getItem(Xe)}catch(e){return console.warn("Failed to read theme preference:",e),null}}clearSavedTheme(){try{localStorage.removeItem(Xe)}catch(e){console.warn("Failed to clear theme preference:",e)}}dispatchThemeChangeEvent(e,i){const n={previousTheme:e,currentTheme:i},s=new CustomEvent(et,{bubbles:!0,detail:n});document.dispatchEvent(s)}onThemeChange(e){const i=n=>{e(n.detail)};return document.addEventListener(et,i),()=>{document.removeEventListener(et,i)}}getDefaultTheme(){var e;return((e=this.config)==null?void 0:e.default_theme)??tt}prefersColorScheme(){return typeof window>"u"||typeof window.matchMedia!="function"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}applySystemPreference(){const e=this.prefersColorScheme();this.applyTheme(e)}watchSystemPreference(e=!1){if(typeof window>"u")return()=>{};const i=window.matchMedia("(prefers-color-scheme: dark)"),n=s=>{e&&this.applyTheme(s.matches?"dark":"light")};return i.addEventListener("change",n),()=>{i.removeEventListener("change",n)}}}const Ie=new qr,Wr=()=>Ie.initialize(),it=t=>Ie.applyTheme(t),Yr=()=>Ie.getAvailableThemes(),_i=()=>Ie.getCurrentTheme();function Gr(t){const e=()=>{if(!t.schema||!t.currentScreenName)return;const n=qe(t.schema,t.currentScreenName);if(!n)return;t.sectionNavController&&(t.sectionNavController.destroy(),t.sectionNavController=null),t.actionHandler&&(t.actionHandler.detach(),t.actionHandler=null),t.wizardController=null,n.wizard?t.wizardController=Hr(t.container,n,0):(t.container.innerHTML=Je(n),n.sections&&n.sections.length>0&&(t.sectionNavController=Or(t.container,n)));const s={onNavigate:(a,r)=>{var l,d;const o=t.currentScreenName;i.showScreen(r),o&&((d=(l=t.options).onNavigate)==null||d.call(l,o,r))},onSubmit:(a,r,o)=>{var d,p;const l=i.getFormData();l&&t.currentScreenName&&((p=(d=t.options).onSubmit)==null||p.call(d,t.currentScreenName,l))},onReset:()=>{const a=t.container.querySelector("form");a==null||a.reset()},onCancel:()=>{},onCustom:()=>{}};t.actionHandler=Br(t.container,s)},i={get schema(){return t.schema},get currentScreen(){return t.currentScreenName},showScreen(n){if(!t.schema)return;if(!qe(t.schema,n)){console.warn(`[Mokkun] Screen not found: ${n}`);return}t.currentScreenName=n,e()},getScreenNames(){return t.schema?hi(t.schema):[]},setTheme(n){it(n)},getTheme(){return _i()},getFormData(){const n=t.container.querySelector("form");if(!n)return null;const s=new FormData(n),a={};return s.forEach((r,o)=>{Object.prototype.hasOwnProperty.call(a,o)?Array.isArray(a[o])?a[o].push(r):a[o]=[a[o],r]:a[o]=r}),a},destroy(){t.sectionNavController&&t.sectionNavController.destroy(),t.actionHandler&&t.actionHandler.detach(),t.container.innerHTML="",t.schema=null,t.currentScreenName=null,t.sectionNavController=null,t.wizardController=null,t.actionHandler=null}};return i}async function Zr(t){var n,s,a;const e=typeof t.container=="string"?document.querySelector(t.container):t.container;if(!e){const r=new Error(`[Mokkun] Container not found: ${t.container}`);throw(n=t.onError)==null||n.call(t,r),r}t.theme?it(t.theme):Wr();const i={container:e,schema:null,currentScreenName:null,sectionNavController:null,wizardController:null,actionHandler:null,options:t};try{if(t.yamlContent){const d=Ue(t.yamlContent);if(!d.success)throw new Error(`[Mokkun] YAML parse error: ${d.errors.map(p=>p.message).join(", ")}`);i.schema=d.data}else if(t.yamlUrl){const d=await jr(t.yamlUrl);if(!d.success)throw new Error(`[Mokkun] Failed to load YAML: ${d.error.message}`);i.schema=d.schema}else throw new Error("[Mokkun] Either yamlUrl or yamlContent must be provided");const r=Gr(i),o=r.getScreenNames(),l=t.initialScreen&&o.includes(t.initialScreen)?t.initialScreen:o[0];return l&&r.showScreen(l),(s=t.onReady)==null||s.call(t,r),r}catch(r){const o=r instanceof Error?r:new Error(String(r));throw(a=t.onError)==null||a.call(t,o),o}}const Ni={init:Zr,VERSION:"0.1.2",utils:{parseYaml:Ue,getScreen:qe,getScreenNames:hi,findFieldById:ui},theme:{apply:it,getCurrent:_i,getAvailable:Yr}};typeof window<"u"&&(window.Mokkun=Ni),N.Combobox=fi,N.Mokkun=Ni,N.Textarea=We,N.createTextarea=Ca,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})}));
702
+ }`;this.customStyleElement=document.createElement("style"),this.customStyleElement.id="mokkun-custom-theme",this.customStyleElement.textContent=n,document.head.appendChild(this.customStyleElement)}removeCustomVariables(){this.customStyleElement&&(this.customStyleElement.remove(),this.customStyleElement=null)}registerTheme(e){this.themes.set(e.id,{...e,isBuiltIn:!1})}unregisterTheme(e){const i=this.themes.get(e);return!i||i.isBuiltIn?!1:(this.themes.delete(e),this.currentThemeId===e&&this.applyTheme(tt),!0)}saveTheme(e){try{localStorage.setItem(Xe,e)}catch(i){console.warn("Failed to save theme preference:",i)}}getSavedTheme(){try{return localStorage.getItem(Xe)}catch(e){return console.warn("Failed to read theme preference:",e),null}}clearSavedTheme(){try{localStorage.removeItem(Xe)}catch(e){console.warn("Failed to clear theme preference:",e)}}dispatchThemeChangeEvent(e,i){const n={previousTheme:e,currentTheme:i},s=new CustomEvent(et,{bubbles:!0,detail:n});document.dispatchEvent(s)}onThemeChange(e){const i=n=>{e(n.detail)};return document.addEventListener(et,i),()=>{document.removeEventListener(et,i)}}getDefaultTheme(){var e;return((e=this.config)==null?void 0:e.default_theme)??tt}prefersColorScheme(){return typeof window>"u"||typeof window.matchMedia!="function"?"light":window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}applySystemPreference(){const e=this.prefersColorScheme();this.applyTheme(e)}watchSystemPreference(e=!1){if(typeof window>"u")return()=>{};const i=window.matchMedia("(prefers-color-scheme: dark)"),n=s=>{e&&this.applyTheme(s.matches?"dark":"light")};return i.addEventListener("change",n),()=>{i.removeEventListener("change",n)}}}const Ie=new qr,Wr=()=>Ie.initialize(),it=t=>Ie.applyTheme(t),Yr=()=>Ie.getAvailableThemes(),_i=()=>Ie.getCurrentTheme();function Gr(t){const e=()=>{if(!t.schema||!t.currentScreenName)return;const n=qe(t.schema,t.currentScreenName);if(!n)return;t.sectionNavController&&(t.sectionNavController.destroy(),t.sectionNavController=null),t.actionHandler&&(t.actionHandler.detach(),t.actionHandler=null),t.wizardController=null,n.wizard?t.wizardController=Hr(t.container,n,0):(t.container.innerHTML=Je(n),n.sections&&n.sections.length>0&&(t.sectionNavController=Or(t.container,n)));const s={onNavigate:(a,r)=>{var l,d;const o=t.currentScreenName;i.showScreen(r),o&&((d=(l=t.options).onNavigate)==null||d.call(l,o,r))},onSubmit:(a,r,o)=>{var d,p;const l=i.getFormData();l&&t.currentScreenName&&((p=(d=t.options).onSubmit)==null||p.call(d,t.currentScreenName,l))},onReset:()=>{const a=t.container.querySelector("form");a==null||a.reset()},onCancel:()=>{},onCustom:()=>{}};t.actionHandler=Br(t.container,s)},i={get schema(){return t.schema},get currentScreen(){return t.currentScreenName},showScreen(n){if(!t.schema)return;if(!qe(t.schema,n)){console.warn(`[Mokkun] Screen not found: ${n}`);return}t.currentScreenName=n,e()},getScreenNames(){return t.schema?hi(t.schema):[]},setTheme(n){it(n)},getTheme(){return _i()},getFormData(){const n=t.container.querySelector("form");if(!n)return null;const s=new FormData(n),a={};return s.forEach((r,o)=>{Object.prototype.hasOwnProperty.call(a,o)?Array.isArray(a[o])?a[o].push(r):a[o]=[a[o],r]:a[o]=r}),a},destroy(){t.sectionNavController&&t.sectionNavController.destroy(),t.actionHandler&&t.actionHandler.detach(),t.container.innerHTML="",t.schema=null,t.currentScreenName=null,t.sectionNavController=null,t.wizardController=null,t.actionHandler=null}};return i}async function Zr(t){var n,s,a;const e=typeof t.container=="string"?document.querySelector(t.container):t.container;if(!e){const r=new Error(`[Mokkun] Container not found: ${t.container}`);throw(n=t.onError)==null||n.call(t,r),r}t.theme?it(t.theme):Wr();const i={container:e,schema:null,currentScreenName:null,sectionNavController:null,wizardController:null,actionHandler:null,options:t};try{if(t.yamlContent){const d=Ue(t.yamlContent);if(!d.success)throw new Error(`[Mokkun] YAML parse error: ${d.errors.map(p=>p.message).join(", ")}`);i.schema=d.data}else if(t.yamlUrl){const d=await jr(t.yamlUrl);if(!d.success)throw new Error(`[Mokkun] Failed to load YAML: ${d.error.message}`);i.schema=d.schema}else throw new Error("[Mokkun] Either yamlUrl or yamlContent must be provided");const r=Gr(i),o=r.getScreenNames(),l=t.initialScreen&&o.includes(t.initialScreen)?t.initialScreen:o[0];return l&&r.showScreen(l),(s=t.onReady)==null||s.call(t,r),r}catch(r){const o=r instanceof Error?r:new Error(String(r));throw(a=t.onError)==null||a.call(t,o),o}}const Ni={init:Zr,VERSION:"0.1.3",utils:{parseYaml:Ue,getScreen:qe,getScreenNames:hi,findFieldById:ui},theme:{apply:it,getCurrent:_i,getAvailable:Yr}};typeof window<"u"&&(window.Mokkun=Ni),N.Combobox=fi,N.Mokkun=Ni,N.Textarea=We,N.createTextarea=Ca,Object.defineProperty(N,Symbol.toStringTag,{value:"Module"})}));
703
703
  //# sourceMappingURL=mokkun.js.map
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mokkun",
3
- "version": "0.1.2",
3
+ "version": "0.1.3",
4
4
  "description": "YAML-based presentation and form builder",
5
5
  "type": "module",
6
6
  "bin": {