@bookklik/senangstart-css 0.1.1 → 0.1.2

package/dist/senangstart-css.min.js

@@ -0,0 +1,375 @@
+(function() {
+'use strict';
+const defaultConfig = {
+theme: {
+spacing: {
+'none':   '0px',
+'tiny':   '4px',
+'small':  '8px',
+'medium': '16px',
+'big':    '32px',
+'giant':  '64px',
+'vast':   '128px'
+},
+radius: {
+'none':   '0px',
+'small':  '4px',
+'medium': '8px',
+'big':    '16px',
+'round':  '9999px'
+},
+shadow: {
+'none':   'none',
+'small':  '0 1px 2px rgba(0,0,0,0.05)',
+'medium': '0 4px 6px rgba(0,0,0,0.1)',
+'big':    '0 10px 15px rgba(0,0,0,0.15)',
+'giant':  '0 25px 50px rgba(0,0,0,0.25)'
+},
+fontSize: {
+'tiny':   '12px',
+'small':  '14px',
+'medium': '16px',
+'big':    '20px',
+'giant':  '32px',
+'vast':   '48px'
+},
+fontWeight: {
+'normal': '400',
+'medium': '500',
+'bold':   '700'
+},
+screens: {
+'mob':  '480px',
+'tab':  '768px',
+'lap':  '1024px',
+'desk': '1280px'
+},
+colors: {
+'white':     '#FFFFFF',
+'black':     '#000000',
+'grey':      '#6B7280',
+'dark':      '#3E4A5D',
+'light':     '#DBEAFE',
+'primary':   '#2563EB',
+'secondary': '#DBEAFE',
+'success':   '#10B981',
+'warning':   '#F59E0B',
+'danger':    '#EF4444'
+},
+zIndex: {
+'base':   '0',
+'low':    '10',
+'mid':    '50',
+'high':   '100',
+'top':    '9999'
+}
+}
+};
+function loadInlineConfig() {
+const configEl = document.querySelector('script[type="senangstart/config"]');
+if (!configEl) return {};
+try {
+return JSON.parse(configEl.textContent);
+} catch (e) {
+console.error('[SenangStart] Invalid config JSON:', e);
+return {};
+}
+}
+function mergeConfig(user) {
+const merged = JSON.parse(JSON.stringify(defaultConfig));
+if (user.theme) {
+for (const key of Object.keys(merged.theme)) {
+if (user.theme[key]) {
+merged.theme[key] = { ...merged.theme[key], ...user.theme[key] };
+}
+}
+}
+return merged;
+}
+function generateCSSVariables(config) {
+const { theme } = config;
+let css = ':root {\n';
+for (const [key, value] of Object.entries(theme.spacing)) {
+css += `  --s-${key}: ${value};\n`;
+}
+for (const [key, value] of Object.entries(theme.radius)) {
+css += `  --r-${key}: ${value};\n`;
+}
+for (const [key, value] of Object.entries(theme.shadow)) {
+css += `  --shadow-${key}: ${value};\n`;
+}
+for (const [key, value] of Object.entries(theme.fontSize)) {
+css += `  --font-${key}: ${value};\n`;
+}
+for (const [key, value] of Object.entries(theme.fontWeight)) {
+css += `  --fw-${key}: ${value};\n`;
+}
+for (const [key, value] of Object.entries(theme.colors)) {
+css += `  --c-${key}: ${value};\n`;
+}
+for (const [key, value] of Object.entries(theme.zIndex)) {
+css += `  --z-${key}: ${value};\n`;
+}
+css += '}\n\n';
+css += '*, *::before, *::after { box-sizing: border-box; }\n\n';
+return css;
+}
+const layoutKeywords = {
+'flex': 'display: flex;',
+'grid': 'display: grid;',
+'block': 'display: block;',
+'inline': 'display: inline-block;',
+'hidden': 'display: none;',
+'row': 'flex-direction: row;',
+'col': 'flex-direction: column;',
+'row-reverse': 'flex-direction: row-reverse;',
+'col-reverse': 'flex-direction: column-reverse;',
+'center': 'justify-content: center; align-items: center;',
+'start': 'justify-content: flex-start; align-items: flex-start;',
+'end': 'justify-content: flex-end; align-items: flex-end;',
+'between': 'justify-content: space-between;',
+'around': 'justify-content: space-around;',
+'evenly': 'justify-content: space-evenly;',
+'wrap': 'flex-wrap: wrap;',
+'nowrap': 'flex-wrap: nowrap;',
+'absolute': 'position: absolute;',
+'relative': 'position: relative;',
+'fixed': 'position: fixed;',
+'sticky': 'position: sticky;'
+};
+const breakpoints = ['mob', 'tab', 'lap', 'desk'];
+const states = ['hover', 'focus', 'active', 'disabled'];
+function parseToken(raw) {
+const token = {
+raw,
+breakpoint: null,
+state: null,
+property: null,
+value: null,
+isArbitrary: false
+};
+const parts = raw.split(':');
+let idx = 0;
+if (breakpoints.includes(parts[0])) {
+token.breakpoint = parts[0];
+idx++;
+}
+if (states.includes(parts[idx])) {
+token.state = parts[idx];
+idx++;
+}
+if (idx < parts.length) {
+token.property = parts[idx];
+idx++;
+}
+if (idx < parts.length) {
+let value = parts.slice(idx).join(':');
+const arbitraryMatch = value.match(/^\[(.+)\]$/);
+if (arbitraryMatch) {
+token.value = arbitraryMatch[1].replace(/_/g, ' ');
+token.isArbitrary = true;
+} else {
+token.value = value;
+}
+}
+return token;
+}
+function generateLayoutRule(token) {
+const { property, value } = token;
+if (property === 'z') {
+return `z-index: var(--z-${value});`;
+}
+if (property === 'overflow') {
+return `overflow: ${value};`;
+}
+return layoutKeywords[property] || '';
+}
+function generateSpaceRule(token) {
+const { property, value, isArbitrary } = token;
+if (value === 'auto') {
+const autoMap = {
+'m': 'margin: auto;',
+'m-x': 'margin-left: auto; margin-right: auto;',
+'m-y': 'margin-top: auto; margin-bottom: auto;',
+'m-t': 'margin-top: auto;',
+'m-r': 'margin-right: auto;',
+'m-b': 'margin-bottom: auto;',
+'m-l': 'margin-left: auto;'
+};
+return autoMap[property] || '';
+}
+const cssValue = isArbitrary ? value : `var(--s-${value})`;
+const map = {
+'p': `padding: ${cssValue};`,
+'p-t': `padding-top: ${cssValue};`,
+'p-r': `padding-right: ${cssValue};`,
+'p-b': `padding-bottom: ${cssValue};`,
+'p-l': `padding-left: ${cssValue};`,
+'p-x': `padding-left: ${cssValue}; padding-right: ${cssValue};`,
+'p-y': `padding-top: ${cssValue}; padding-bottom: ${cssValue};`,
+'m': `margin: ${cssValue};`,
+'m-t': `margin-top: ${cssValue};`,
+'m-r': `margin-right: ${cssValue};`,
+'m-b': `margin-bottom: ${cssValue};`,
+'m-l': `margin-left: ${cssValue};`,
+'m-x': `margin-left: ${cssValue}; margin-right: ${cssValue};`,
+'m-y': `margin-top: ${cssValue}; margin-bottom: ${cssValue};`,
+'g': `gap: ${cssValue};`,
+'g-x': `column-gap: ${cssValue};`,
+'g-y': `row-gap: ${cssValue};`,
+'w': `width: ${cssValue};`,
+'h': `height: ${cssValue};`,
+'min-w': `min-width: ${cssValue};`,
+'max-w': `max-width: ${cssValue};`,
+'min-h': `min-height: ${cssValue};`,
+'max-h': `max-height: ${cssValue};`
+};
+return map[property] || '';
+}
+function generateVisualRule(token) {
+const { property, value, isArbitrary } = token;
+const rules = {
+'bg': () => {
+const cssValue = isArbitrary ? value : `var(--c-${value})`;
+return `background-color: ${cssValue};`;
+},
+'text': () => {
+if (['left', 'center', 'right'].includes(value)) {
+return `text-align: ${value};`;
+}
+const cssValue = isArbitrary ? value : `var(--c-${value})`;
+return `color: ${cssValue};`;
+},
+'text-size': () => {
+const cssValue = isArbitrary ? value : `var(--font-${value})`;
+return `font-size: ${cssValue};`;
+},
+'font': () => `font-weight: var(--fw-${value});`,
+'border': () => {
+const cssValue = isArbitrary ? value : `var(--c-${value})`;
+return `border-color: ${cssValue}; border-style: solid;`;
+},
+'border-w': () => {
+const cssValue = isArbitrary ? value : `var(--s-${value})`;
+return `border-width: ${cssValue}; border-style: solid;`;
+},
+'rounded': () => `border-radius: var(--r-${value});`,
+'shadow': () => `box-shadow: var(--shadow-${value});`,
+'opacity': () => `opacity: ${value};`
+};
+const gen = rules[property];
+return gen ? gen() : '';
+}
+function generateRule(raw, attrType) {
+if (attrType === 'layout' && layoutKeywords[raw]) {
+return `[layout~="${raw}"] { ${layoutKeywords[raw]} }\n`;
+}
+const token = parseToken(raw);
+let cssDeclaration = '';
+switch (attrType) {
+case 'layout':
+cssDeclaration = generateLayoutRule(token);
+break;
+case 'space':
+cssDeclaration = generateSpaceRule(token);
+break;
+case 'visual':
+cssDeclaration = generateVisualRule(token);
+break;
+}
+if (!cssDeclaration) return '';
+let selector = `[${attrType}~="${raw}"]`;
+if (token.state) {
+selector += `:${token.state}`;
+}
+return `${selector} { ${cssDeclaration} }\n`;
+}
+function scanDOM() {
+const tokens = {
+layout: new Set(),
+space: new Set(),
+visual: new Set()
+};
+const elements = document.querySelectorAll('[layout], [space], [visual]');
+elements.forEach(el => {
+['layout', 'space', 'visual'].forEach(attr => {
+const value = el.getAttribute(attr);
+if (value) {
+value.split(/\s+/).forEach(token => {
+if (token) tokens[attr].add(token);
+});
+}
+});
+});
+return tokens;
+}
+function compileCSS(tokens, config) {
+let css = generateCSSVariables(config);
+const baseRules = [];
+const mediaRules = {
+mob: [],
+tab: [],
+lap: [],
+desk: []
+};
+for (const [attrType, values] of Object.entries(tokens)) {
+for (const raw of values) {
+const rule = generateRule(raw, attrType);
+if (rule) {
+const bpMatch = raw.match(/^(mob|tab|lap|desk):/);
+if (bpMatch) {
+mediaRules[bpMatch[1]].push(rule);
+} else {
+baseRules.push(rule);
+}
+}
+}
+}
+css += baseRules.join('');
+const { screens } = config.theme;
+for (const [bp, rules] of Object.entries(mediaRules)) {
+if (rules.length > 0) {
+css += `\n@media (min-width: ${screens[bp]}) {\n`;
+css += rules.map(r => '  ' + r).join('');
+css += '}\n';
+}
+}
+return css;
+}
+function injectStyles(css) {
+let styleEl = document.getElementById('senangstart-jit');
+if (!styleEl) {
+styleEl = document.createElement('style');
+styleEl.id = 'senangstart-jit';
+document.head.appendChild(styleEl);
+}
+styleEl.textContent = css;
+}
+function init() {
+const userConfig = loadInlineConfig();
+const config = mergeConfig(userConfig);
+const tokens = scanDOM();
+const css = compileCSS(tokens, config);
+injectStyles(css);
+const observer = new MutationObserver(() => {
+const newTokens = scanDOM();
+const newCSS = compileCSS(newTokens, config);
+injectStyles(newCSS);
+});
+observer.observe(document.body, {
+childList: true,
+subtree: true,
+attributes: true,
+attributeFilter: ['layout', 'space', 'visual']
+});
+console.log('%c[SenangStart CSS]%c JIT runtime initialized ✓',
+'color: #2563EB; font-weight: bold;',
+'color: #10B981;'
+);
+}
+if (document.readyState === 'loading') {
+document.addEventListener('DOMContentLoaded', init);
+} else {
+init();
+}
+})();

package/docs/.vitepress/cache/deps/_metadata.json

@@ -0,0 +1,52 @@
+{
+  "hash": "503d8545",
+  "configHash": "7a659af5",
+  "lockfileHash": "148e5d09",
+  "browserHash": "31430ee1",
+  "optimized": {
+    "vue": {
+      "src": "../../../../node_modules/vue/dist/vue.runtime.esm-bundler.js",
+      "file": "vue.js",
+      "fileHash": "bb09d08e",
+      "needsInterop": false
+    },
+    "vitepress > @vue/devtools-api": {
+      "src": "../../../../node_modules/@vue/devtools-api/dist/index.js",
+      "file": "vitepress___@vue_devtools-api.js",
+      "fileHash": "1792716f",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/core": {
+      "src": "../../../../node_modules/@vueuse/core/index.mjs",
+      "file": "vitepress___@vueuse_core.js",
+      "fileHash": "97e57308",
+      "needsInterop": false
+    },
+    "vitepress > @vueuse/integrations/useFocusTrap": {
+      "src": "../../../../node_modules/@vueuse/integrations/useFocusTrap.mjs",
+      "file": "vitepress___@vueuse_integrations_useFocusTrap.js",
+      "fileHash": "4a67da49",
+      "needsInterop": false
+    },
+    "vitepress > mark.js/src/vanilla.js": {
+      "src": "../../../../node_modules/mark.js/src/vanilla.js",
+      "file": "vitepress___mark__js_src_vanilla__js.js",
+      "fileHash": "ffe975a7",
+      "needsInterop": false
+    },
+    "vitepress > minisearch": {
+      "src": "../../../../node_modules/minisearch/dist/es/index.js",
+      "file": "vitepress___minisearch.js",
+      "fileHash": "da3112be",
+      "needsInterop": false
+    }
+  },
+  "chunks": {
+    "chunk-2CLQ7TTZ": {
+      "file": "chunk-2CLQ7TTZ.js"
+    },
+    "chunk-LE5NDSFD": {
+      "file": "chunk-LE5NDSFD.js"
+    }
+  }
+}