@easemate/web-kit 0.1.0

package/build/internal/style-inject.d.ts

@@ -0,0 +1,44 @@
+/**
+ * Style injection utilities for runtime CSS application.
+ */
+/**
+ * Check if we're in a browser environment.
+ */
+export declare const isBrowser: () => boolean;
+/**
+ * Inject a style tag with the given CSS content.
+ */
+export declare function injectStyle(id: string, css: string, nonce?: string): HTMLStyleElement | null;
+/**
+ * Remove an injected style tag.
+ */
+export declare function removeStyle(id: string): void;
+/**
+ * Check if a style is already injected.
+ */
+export declare function hasStyle(id: string): boolean;
+/**
+ * Minimal reset styles (box-sizing, etc.)
+ */
+export declare const RESET_CSS: string;
+/**
+ * Base body/html styles for dark theme.
+ */
+export declare const BASE_CSS: string;
+/**
+ * Combined main styles (reset + base).
+ */
+export declare const MAIN_CSS: string;
+export type StylePreset = 'reset' | 'base' | 'main';
+/**
+ * Get CSS content for a preset.
+ */
+export declare function getPresetCSS(preset: StylePreset): string;
+/**
+ * Inject preset styles.
+ */
+export declare function injectPreset(preset: StylePreset, nonce?: string): HTMLStyleElement | null;
+/**
+ * Remove preset styles.
+ */
+export declare function removePreset(preset: StylePreset): void;

package/build/internal/style-inject.js

@@ -0,0 +1,226 @@
+/**
+ * Style injection utilities for runtime CSS application.
+ */
+const STYLE_ID_PREFIX = 'ease-webkit-';
+/**
+ * Check if we're in a browser environment.
+ */
+export const isBrowser = () => typeof document !== 'undefined' && typeof window !== 'undefined';
+/**
+ * Inject a style tag with the given CSS content.
+ */
+export function injectStyle(id, css, nonce) {
+    if (!isBrowser()) {
+        return null;
+    }
+    const fullId = STYLE_ID_PREFIX + id;
+    // Check if already injected
+    let style = document.getElementById(fullId);
+    if (style) {
+        // Update content if different
+        if (style.textContent !== css) {
+            style.textContent = css;
+        }
+        return style;
+    }
+    // Create new style element
+    style = document.createElement('style');
+    style.id = fullId;
+    style.textContent = css;
+    if (nonce) {
+        style.nonce = nonce;
+    }
+    document.head.appendChild(style);
+    return style;
+}
+/**
+ * Remove an injected style tag.
+ */
+export function removeStyle(id) {
+    if (!isBrowser()) {
+        return;
+    }
+    const fullId = STYLE_ID_PREFIX + id;
+    const style = document.getElementById(fullId);
+    if (style) {
+        style.remove();
+    }
+}
+/**
+ * Check if a style is already injected.
+ */
+export function hasStyle(id) {
+    if (!isBrowser()) {
+        return false;
+    }
+    const fullId = STYLE_ID_PREFIX + id;
+    return document.getElementById(fullId) !== null;
+}
+// --------------------------
+// Preset styles
+// --------------------------
+/**
+ * Minimal reset styles (box-sizing, etc.)
+ */
+export const RESET_CSS = `
+@layer ease-reset {
+  *,
+  *::after,
+  *::before {
+    box-sizing: border-box;
+    transition-timing-function: cubic-bezier(0.25, 0, 0.5, 1);
+  }
+
+  :where(html) {
+    color-scheme: light dark;
+    hanging-punctuation: first allow-end last;
+    interpolate-size: allow-keywords;
+    scroll-behavior: smooth;
+    scrollbar-gutter: stable;
+    text-size-adjust: none;
+    -webkit-text-size-adjust: none;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-font-smoothing: antialiased;
+  }
+
+  :where(html.translated-rtl) {
+    direction: rtl;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    :where(html) {
+      scroll-behavior: auto;
+    }
+  }
+
+  :where(body) {
+    min-block-size: 100svb;
+    min-inline-size: 300px;
+  }
+
+  :where(canvas, img, picture, svg, video) {
+    block-size: auto;
+    border: none;
+    display: block;
+    max-inline-size: 100%;
+  }
+
+  :where(button) {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  :where(textarea) {
+    resize: vertical;
+  }
+
+  :where(textarea:not([rows])) {
+    field-sizing: content;
+  }
+
+  :where(fieldset, iframe) {
+    border: none;
+  }
+
+  :where(p, li, h1, h2, h3, h4, h5, h6) {
+    overflow-wrap: break-word;
+    text-wrap: pretty;
+    margin: 0;
+  }
+
+  :where(abbr[title]) {
+    border: none;
+    text-decoration: none;
+  }
+
+  :where(cite) {
+    font-style: inherit;
+  }
+
+  :where(small) {
+    font-size: inherit;
+  }
+
+  :where(li, ol, ul) {
+    list-style: none;
+  }
+
+  :where(nav:not([role='list'])):is(ul, li, ol, ul) {
+    margin: 0;
+    padding: 0;
+  }
+
+  :where(dialog, [popover]) {
+    background: transparent;
+    border: none;
+    color: inherit;
+    margin: auto;
+    max-block-size: none;
+    max-inline-size: none;
+    position: fixed;
+  }
+
+  :where([popover]) {
+    inset: auto;
+  }
+
+  :where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
+    display: none;
+  }
+
+  :where([hidden]:not([hidden='until-found'])) {
+    display: none;
+  }
+}
+`.trim();
+/**
+ * Base body/html styles for dark theme.
+ */
+export const BASE_CSS = `
+html,
+body {
+  background-color: var(--color-gray-900);
+}
+
+body {
+  font-family: var(--ease-font-family, 'Instrument Sans', sans-serif);
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  font-variation-settings: 'wdth' 100;
+  min-height: 100dvh;
+  color: var(--color-gray-600);
+}
+`.trim();
+/**
+ * Combined main styles (reset + base).
+ */
+export const MAIN_CSS = `${RESET_CSS}\n\n${BASE_CSS}`;
+/**
+ * Get CSS content for a preset.
+ */
+export function getPresetCSS(preset) {
+    switch (preset) {
+        case 'reset':
+            return RESET_CSS;
+        case 'base':
+            return BASE_CSS;
+        case 'main':
+            return MAIN_CSS;
+        default:
+            return '';
+    }
+}
+/**
+ * Inject preset styles.
+ */
+export function injectPreset(preset, nonce) {
+    const css = getPresetCSS(preset);
+    return injectStyle(preset, css, nonce);
+}
+/**
+ * Remove preset styles.
+ */
+export function removePreset(preset) {
+    removeStyle(preset);
+}

package/build/register.cjs

@@ -0,0 +1,36 @@
+"use strict";
+/**
+ * Side-effect import that registers all custom elements.
+ * Use this for browser environments where you want all components available immediately.
+ *
+ * @example
+ * ```ts
+ * import '@easemate/web-kit/register';
+ * ```
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+// Elements (side-effects - each imports and registers its custom element)
+require("./elements/button/index.cjs");
+require("./elements/checkbox/index.cjs");
+require("./elements/color/index.cjs");
+require("./elements/color/picker.cjs");
+require("./elements/dropdown/index.cjs");
+require("./elements/field/index.cjs");
+require("./elements/icons/index.cjs");
+require("./elements/input/index.cjs");
+require("./elements/logo/index.cjs");
+require("./elements/monitor/index.cjs");
+require("./elements/monitor/fps.cjs");
+require("./elements/number/index.cjs");
+require("./elements/origin/index.cjs");
+require("./elements/popover/index.cjs");
+require("./elements/radio/index.cjs");
+require("./elements/radio/input.cjs");
+require("./elements/radio/option.cjs");
+require("./elements/slider/index.cjs");
+require("./elements/state/index.cjs");
+require("./elements/toggle/index.cjs");
+require("./elements/tooltip/index.cjs");
+// Components (advanced elements)
+require("./components/code/index.cjs");
+require("./components/curve/index.cjs");

package/build/register.d.cts

@@ -0,0 +1,32 @@
+/**
+ * Side-effect import that registers all custom elements.
+ * Use this for browser environments where you want all components available immediately.
+ *
+ * @example
+ * ```ts
+ * import '@easemate/web-kit/register';
+ * ```
+ */
+import "./elements/button/index.cjs";
+import "./elements/checkbox/index.cjs";
+import "./elements/color/index.cjs";
+import "./elements/color/picker.cjs";
+import "./elements/dropdown/index.cjs";
+import "./elements/field/index.cjs";
+import "./elements/icons/index.cjs";
+import "./elements/input/index.cjs";
+import "./elements/logo/index.cjs";
+import "./elements/monitor/index.cjs";
+import "./elements/monitor/fps.cjs";
+import "./elements/number/index.cjs";
+import "./elements/origin/index.cjs";
+import "./elements/popover/index.cjs";
+import "./elements/radio/index.cjs";
+import "./elements/radio/input.cjs";
+import "./elements/radio/option.cjs";
+import "./elements/slider/index.cjs";
+import "./elements/state/index.cjs";
+import "./elements/toggle/index.cjs";
+import "./elements/tooltip/index.cjs";
+import "./components/code/index.cjs";
+import "./components/curve/index.cjs";

package/build/register.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Side-effect import that registers all custom elements.
+ * Use this for browser environments where you want all components available immediately.
+ *
+ * @example
+ * ```ts
+ * import '@easemate/web-kit/register';
+ * ```
+ */
+import "./elements/button/index.js";
+import "./elements/checkbox/index.js";
+import "./elements/color/index.js";
+import "./elements/color/picker.js";
+import "./elements/dropdown/index.js";
+import "./elements/field/index.js";
+import "./elements/icons/index.js";
+import "./elements/input/index.js";
+import "./elements/logo/index.js";
+import "./elements/monitor/index.js";
+import "./elements/monitor/fps.js";
+import "./elements/number/index.js";
+import "./elements/origin/index.js";
+import "./elements/popover/index.js";
+import "./elements/radio/index.js";
+import "./elements/radio/input.js";
+import "./elements/radio/option.js";
+import "./elements/slider/index.js";
+import "./elements/state/index.js";
+import "./elements/toggle/index.js";
+import "./elements/tooltip/index.js";
+import "./components/code/index.js";
+import "./components/curve/index.js";

package/build/register.js

@@ -0,0 +1,34 @@
+/**
+ * Side-effect import that registers all custom elements.
+ * Use this for browser environments where you want all components available immediately.
+ *
+ * @example
+ * ```ts
+ * import '@easemate/web-kit/register';
+ * ```
+ */
+// Elements (side-effects - each imports and registers its custom element)
+import "./elements/button/index.js";
+import "./elements/checkbox/index.js";
+import "./elements/color/index.js";
+import "./elements/color/picker.js";
+import "./elements/dropdown/index.js";
+import "./elements/field/index.js";
+import "./elements/icons/index.js";
+import "./elements/input/index.js";
+import "./elements/logo/index.js";
+import "./elements/monitor/index.js";
+import "./elements/monitor/fps.js";
+import "./elements/number/index.js";
+import "./elements/origin/index.js";
+import "./elements/popover/index.js";
+import "./elements/radio/index.js";
+import "./elements/radio/input.js";
+import "./elements/radio/option.js";
+import "./elements/slider/index.js";
+import "./elements/state/index.js";
+import "./elements/toggle/index.js";
+import "./elements/tooltip/index.js";
+// Components (advanced elements)
+import "./components/code/index.js";
+import "./components/curve/index.js";