react-led-digit 0.0.7 → 0.0.9

package/lib/Blinker/Blinker.d.ts

@@ -1,25 +1,28 @@
+/**
+ * Switches intrnal state periodically (visible), calling subscribers each time.
+ */
 type BlinkerSubscriber = (state: BlinkerState['visible']) => void;
 type BlinkerState = {
     timeout: null | ReturnType<typeof setTimeout>;
     subscribers: BlinkerSubscriber[];
-    period: number;
     ratio: number;
+    period: number;
     visible: boolean;
-    blinks: number;
 };
 type BlinkerOptions = {
     autoRun?: boolean;
-    period?: BlinkerState['period'];
     ratio?: BlinkerState['ratio'];
+    period?: BlinkerState['period'];
     visible?: BlinkerState['visible'];
+    singleton?: boolean;
 };
 export declare class Blinker {
     #private;
     private static instance;
     constructor(options?: BlinkerOptions);
-    get period(): BlinkerState['period'];
-    get ratio(): BlinkerState['ratio'];
-    get visible(): BlinkerState['visible'];
+    get period(): BlinkerState["period"];
+    get ratio(): BlinkerState["ratio"];
+    get visible(): BlinkerState["visible"];
     set period(val: BlinkerState['period']);
     set ratio(val: BlinkerState['ratio']);
     set visible(val: BlinkerState['visible']);

package/lib/Blinker/Blinker.js

@@ -1,16 +1,19 @@
 "use strict";
+/**
+ * Switches intrnal state periodically (visible), calling subscribers each time.
+ */
+var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
+    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
+    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
+    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
+};
 var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
     if (kind === "m") throw new TypeError("Private method is not writable");
     if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a setter");
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (receiver, state, kind, f) {
-    if (kind === "a" && !f) throw new TypeError("Private accessor was defined without a getter");
-    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
-    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
-};
-var _Blinker_instances, _Blinker_initOptions, _Blinker_state, _Blinker_on, _Blinker_off;
+var _Blinker_instances, _Blinker_options, _Blinker_state, _Blinker_on, _Blinker_off;
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Blinker = void 0;
 const defaultOptions = {
@@ -18,27 +21,34 @@ const defaultOptions = {
     period: 1000,
     ratio: 1,
     visible: true,
+    singleton: true,
 };
 class Blinker {
     constructor(options = defaultOptions) {
         _Blinker_instances.add(this);
-        _Blinker_initOptions.set(this, defaultOptions); // store options
+        _Blinker_options.set(this, defaultOptions); // initial options
         _Blinker_state.set(this, {
-            timeout: null,
-            subscribers: [],
-            period: defaultOptions.period,
             ratio: defaultOptions.ratio,
+            period: defaultOptions.period,
+            subscribers: [],
+            timeout: null,
             visible: defaultOptions.visible,
-            blinks: 0,
         });
+        const init = () => {
+            __classPrivateFieldSet(this, _Blinker_options, Object.assign(Object.assign({}, __classPrivateFieldGet(this, _Blinker_options, "f")), options), "f"); // merge options
+            __classPrivateFieldGet(this, _Blinker_state, "f").period = __classPrivateFieldGet(this, _Blinker_options, "f").period;
+            __classPrivateFieldGet(this, _Blinker_state, "f").ratio = __classPrivateFieldGet(this, _Blinker_options, "f").ratio;
+            __classPrivateFieldGet(this, _Blinker_state, "f").visible = __classPrivateFieldGet(this, _Blinker_options, "f").visible;
+            if (__classPrivateFieldGet(this, _Blinker_options, "f").autoRun)
+                this.start();
+        };
+        if (options.singleton === false) {
+            init();
+            return this;
+        }
         if (!Blinker.instance) {
             Blinker.instance = this;
-            __classPrivateFieldSet(this, _Blinker_initOptions, Object.assign(Object.assign({}, defaultOptions), options), "f");
-            __classPrivateFieldGet(this, _Blinker_state, "f").period = __classPrivateFieldGet(this, _Blinker_initOptions, "f").period;
-            __classPrivateFieldGet(this, _Blinker_state, "f").ratio = __classPrivateFieldGet(this, _Blinker_initOptions, "f").ratio;
-            __classPrivateFieldGet(this, _Blinker_state, "f").visible = __classPrivateFieldGet(this, _Blinker_initOptions, "f").visible;
-            if (__classPrivateFieldGet(this, _Blinker_initOptions, "f").autoRun)
-                this.start();
+            init();
         }
         return Blinker.instance;
     }
@@ -71,12 +81,14 @@ class Blinker {
     }
     start(visible = __classPrivateFieldGet(this, _Blinker_state, "f").visible) {
         if (__classPrivateFieldGet(this, _Blinker_state, "f").timeout)
-            this.stop();
+            return; // already runnning
         visible ? __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this) : __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this); // start blinking
     }
     stop() {
-        __classPrivateFieldGet(this, _Blinker_state, "f").timeout && clearTimeout(__classPrivateFieldGet(this, _Blinker_state, "f").timeout);
-        __classPrivateFieldGet(this, _Blinker_state, "f").timeout = null;
+        if (__classPrivateFieldGet(this, _Blinker_state, "f").timeout) {
+            clearTimeout(__classPrivateFieldGet(this, _Blinker_state, "f").timeout);
+            __classPrivateFieldGet(this, _Blinker_state, "f").timeout = null;
+        }
     }
     subscribe(fn) {
         if (!__classPrivateFieldGet(this, _Blinker_state, "f").subscribers.includes(fn)) {
@@ -88,25 +100,25 @@ class Blinker {
     }
 }
 exports.Blinker = Blinker;
-_Blinker_initOptions = new WeakMap(), _Blinker_state = new WeakMap(), _Blinker_instances = new WeakSet(), _Blinker_on = function _Blinker_on() {
-    __classPrivateFieldGet(this, _Blinker_state, "f").blinks++;
+_Blinker_options = new WeakMap(), _Blinker_state = new WeakMap(), _Blinker_instances = new WeakSet(), _Blinker_on = function _Blinker_on() {
     __classPrivateFieldGet(this, _Blinker_state, "f").visible = true;
     __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.forEach(fn => fn(true));
     __classPrivateFieldGet(this, _Blinker_state, "f").timeout = setTimeout(() => {
         __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_off).call(this);
     }, getPeriod(__classPrivateFieldGet(this, _Blinker_state, "f")).on);
 }, _Blinker_off = function _Blinker_off() {
-    __classPrivateFieldGet(this, _Blinker_state, "f").blinks++;
     __classPrivateFieldGet(this, _Blinker_state, "f").visible = false;
     __classPrivateFieldGet(this, _Blinker_state, "f").subscribers.forEach(fn => fn(false));
     __classPrivateFieldGet(this, _Blinker_state, "f").timeout = setTimeout(() => {
         __classPrivateFieldGet(this, _Blinker_instances, "m", _Blinker_on).call(this);
     }, getPeriod(__classPrivateFieldGet(this, _Blinker_state, "f")).off);
 };
+// ratio=1, tot=2, on=0.5, off=0.5
+// ratio=2, tot=3, on=0.66, off=0.33
 function getPeriod(state) {
     const total = state.ratio + 1;
     return {
-        on: state.period * (1 / total),
-        off: state.period * (1 - 1 / total),
+        on: state.period * (1 - 1 / total),
+        off: state.period * (1 / total),
     };
 }

package/lib/BlinkingDigit/BlinkingDigit.d.ts

@@ -5,6 +5,7 @@ type BlinkingDigit = Digit & {
     blinkOptions?: {
         period?: Blinker['period'];
         ratio?: Blinker['ratio'];
+        sync?: boolean;
     };
 };
 export declare const BlinkingDigit: React.MemoExoticComponent<({ blinkOptions, className, ...rest }: BlinkingDigit) => import("react/jsx-runtime").JSX.Element>;

package/lib/BlinkingDigit/BlinkingDigit.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -43,18 +53,18 @@ const react_1 = __importStar(require("react"));
 const clsx_1 = __importDefault(require("clsx"));
 const Digit_1 = require("../Digit");
 const Blinker_1 = require("../Blinker");
-const blinker = new Blinker_1.Blinker(); // singleton makes all BlinkingDigit's to blink synchronoulsy
 exports.BlinkingDigit = react_1.default.memo((_a) => {
     var { blinkOptions, className } = _a, rest = __rest(_a, ["blinkOptions", "className"]);
-    const [visible, setVisible] = (0, react_1.useState)(blinker.visible);
+    const [visible, setVisible] = (0, react_1.useState)(true);
     (0, react_1.useEffect)(() => {
+        const blinker = new Blinker_1.Blinker(Object.assign(Object.assign({}, blinkOptions), { singleton: blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.sync })); // singleton makes all instances BlinkingDigit to blink in sync
         if (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period)
             blinker.period = blinkOptions.period;
         if (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio)
             blinker.ratio = blinkOptions.ratio;
         blinker.subscribe(setVisible);
         return () => blinker.unsubscribe(setVisible);
-    }, [blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period, blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio]);
+    }, [blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period, blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio, blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.sync]);
     if ((blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.period) === 0 ||
         (blinkOptions === null || blinkOptions === void 0 ? void 0 : blinkOptions.ratio) === 0 ||
         typeof (rest === null || rest === void 0 ? void 0 : rest.off) === 'boolean')

package/lib/Digit/Digit.js

@@ -21,7 +21,7 @@ const useStyleInjection_1 = __importDefault(require("./useStyleInjection"));
 const digit_css_js_1 = __importDefault(require("./digit.css.js"));
 const Digit = (_a) => {
     var rest = __rest(_a, []);
-    const scopeAttribute = (0, useStyleInjection_1.default)(digit_css_js_1.default.content, digit_css_js_1.default.hash);
+    const scopeAttribute = (0, useStyleInjection_1.default)(digit_css_js_1.default.content, digit_css_js_1.default.hash, []);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, scopeAttribute, { style: { display: 'contents' }, children: (0, jsx_runtime_1.jsx)(UnstyledDigit_1.Digit, Object.assign({}, rest)) })));
 };
 exports.Digit = Digit;

package/lib/Digit/Digit.stories.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { StoryObj } from '@storybook/react';
+import { Digit } from '../';
+declare const meta: {
+    title: string;
+    component: ({ ...rest }: Digit) => import("react/jsx-runtime").JSX.Element;
+    tags: string[];
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        off: {
+            control: "boolean";
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export type DisplayProps = React.HTMLAttributes<HTMLDivElement> & {
+    scale?: number;
+    segmentStyle?: Digit['segmentStyle'];
+    value: string;
+};
+export declare const Clock: Story;
+export declare const Digits: Story;
+export declare const Blinking: Story;

package/lib/Digit/Digit.stories.js

@@ -0,0 +1,172 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Blinking = exports.Digits = exports.Clock = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const __1 = require("../");
+const _1 = require("./");
+const meta = {
+    title: 'Example/Digit',
+    component: __1.Digit,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'fullscreen', // https://storybook.js.org/docs/configure/story-layout
+    },
+    argTypes: {
+        off: { control: 'boolean' },
+    },
+};
+exports.default = meta;
+const grid = {
+    display: 'flex',
+    gap: '.35rem',
+    padding: '1rem',
+    placeItems: 'center center',
+};
+const CustomDigit = (_a) => {
+    var rest = __rest(_a, []);
+    return ((0, jsx_runtime_1.jsx)(__1.Digit, Object.assign({}, rest, { shape: "pill", segmentStyle: {
+            thickness: '.25rem',
+            length: '1.5rem',
+            spacing: '0.25rem',
+            filament: '.0625rem',
+        } })));
+};
+const DigitTest = () => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `.digit { outline: 0.1px solid rgba(255, 0, 0, 0.2); }` }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: 0, className: "test" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 1, shape: "round", segmentStyle: {
+                            thickness: '.35rem',
+                            color: 'green',
+                            colorOff: 'blue',
+                        } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 3, shape: "rect", segmentStyle: { spacing: '.25rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 4, style: { color: 'red' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: ":" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 5 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 6 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 7 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 8, off: true }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: 9 }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "pm" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", blinkOptions: { period: 2000 } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "round" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", shape: "rect" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "am", shape: "round" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "pm", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "-", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "_", shape: "pill" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: 2, shape: "pill", segmentStyle: { thickness: '.5rem' } }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", shape: "pill", segmentStyle: { thickness: '1rem' } })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "A" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "C" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "F" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "G" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "H" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "J" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "L" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "O" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "P" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "S" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "U" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "c" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "d" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "h" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "n" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "o" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "u" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: 0 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 1 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: ":" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 2 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: 3 }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "am" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "E" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "o" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "r" }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "." })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "A" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "C" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "E" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "F" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "H" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "J" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "L" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "O" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "P" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "U" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "Y" })] }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(CustomDigit, { value: "c" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "b" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "d" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "h" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "n" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "o" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "r" }), (0, jsx_runtime_1.jsx)(CustomDigit, { value: "u" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: "2", shape: "round", segmentStyle: {
+                            color: 'green',
+                            colorOff: 'red',
+                            length: '1.5rem',
+                            spacing: '-0.025rem',
+                            thickness: '0.5rem',
+                            opacityOff: 0.2,
+                        } })] })] }));
+};
+const charset = new Set(Object.keys(_1.charToSevenSegments));
+function setCharAt(str, index, chr) {
+    if (index > str.length - 1)
+        return str;
+    return str.substr(0, index) + chr + str.substr(index + 1);
+}
+const BlinkingDigitTest = () => {
+    const input = (0, react_1.useRef)(null);
+    const [dgts, setDgts] = (0, react_1.useState)('');
+    const addDigit = () => {
+        if (input.current.value) {
+            setDgts(prev => prev + input.current.value);
+        }
+    };
+    const removeDigit = (idx) => {
+        const next = setCharAt(dgts, idx, '');
+        setDgts(next);
+    };
+    const handleChange = () => {
+        if (!charset.has(input.current.value)) {
+            input.current.value = '';
+        }
+    };
+    const handleInputKeypress = (e) => {
+        if (e.key === 'Enter') {
+            addDigit();
+        }
+    };
+    (0, react_1.useEffect)(() => {
+        var _a;
+        (_a = input.current) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', handleInputKeypress);
+        return () => {
+            var _a;
+            (_a = input.current) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', handleInputKeypress);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("style", { children: `
+          .digit { outline: 0.1px solid rgba(255, 0, 0, 0.2); }
+          input { border: 1px solid black; border-radius: .5rem; padding: .5rem .25rem;}
+          button { border: none; border-radius: .5rem; padding: .5rem 1rem;}
+          button, input, p { font-size: 100%; font-family: sans-serif; margin: .25rem;}
+        ` }), (0, jsx_runtime_1.jsxs)("p", { children: ["charset: ", Array.from(charset).join(', ')] }), (0, jsx_runtime_1.jsx)("input", { type: "text", placeholder: "digit", ref: input, onChange: handleChange, maxLength: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: addDigit, children: "Add digit" }), (0, jsx_runtime_1.jsxs)("div", { style: grid, children: [(0, jsx_runtime_1.jsx)(__1.Digit, { value: "8", segmentStyle: { thickness: '.35rem' } }), (0, jsx_runtime_1.jsx)(__1.Digit, { value: "b" }), (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: ":", blinkOptions: {
+                            period: 2000,
+                            ratio: 3,
+                        } }), dgts.split('').map((char, idx) => ((0, jsx_runtime_1.jsx)(__1.BlinkingDigit, { value: char, onClick: () => removeDigit(idx), segmentStyle: {
+                            transitionDuration: '0.5s',
+                        }, blinkOptions: { sync: false } }, idx)))] })] }));
+};
+const getDigits = (str) => {
+    let s = str.trim().toLowerCase();
+    const am = s.includes('am');
+    const pm = s.includes('pm');
+    s = s.replace('am', '').replace('pm', '').replace(' ', '');
+    const result = s.split('');
+    if (am)
+        result.push('am');
+    if (pm)
+        result.push('pm');
+    return result;
+};
+const Display = (_a) => {
+    var { scale = 1, value } = _a, rest = __rest(_a, ["scale", "value"]);
+    const digits = getDigits(value);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { children: digits.map((digit, idx) => {
+            const props = {
+                value: digit,
+                style: {
+                    fontSize: `${scale * 100}%`,
+                },
+                segmentStyle: {
+                    color: 'green',
+                    cornerShift: 'calc(var(--thickness) / 8)',
+                },
+            };
+            if (digit === ':') {
+                return (0, jsx_runtime_1.jsx)(__1.BlinkingDigit, Object.assign({}, props), idx);
+            }
+            else {
+                return (0, jsx_runtime_1.jsx)(__1.Digit, Object.assign({}, props), idx);
+            }
+        }) })));
+};
+const getTime = () => new Date().toLocaleTimeString();
+const SimpleClock = () => {
+    const [time, setTime] = (0, react_1.useState)(getTime());
+    const blinker = new __1.Blinker();
+    blinker.period = 2000;
+    blinker.ratio = 1;
+    const handleBlinkerChange = () => setTime(getTime());
+    (0, react_1.useEffect)(() => {
+        blinker.subscribe(handleBlinkerChange);
+        return () => blinker.unsubscribe(handleBlinkerChange);
+    }, []);
+    return (0, jsx_runtime_1.jsx)(Display, { scale: 2, style: grid, value: time });
+};
+exports.Clock = {
+    args: {
+        value: '0',
+    },
+    render: SimpleClock,
+};
+exports.Digits = {
+    args: {
+        value: '0',
+    },
+    render: DigitTest,
+};
+exports.Blinking = {
+    args: {
+        value: '0',
+    },
+    render: BlinkingDigitTest,
+};

package/lib/Digit/UnstyledDigit.d.ts

@@ -18,6 +18,7 @@ type SegmentStyle = {
     opacityOn?: CSSProperties['opacity'];
     opacityOff?: CSSProperties['opacity'];
     transitionDuration?: CSSProperties['transitionDuration'];
+    cornerShift?: CSSProperties['width'];
 };
 export type Digit = DivProps & DigitProps & {
     segmentStyle?: SegmentStyle;

package/lib/Digit/UnstyledDigit.js

@@ -23,7 +23,7 @@ const Digit = (_a) => {
     var { segmentStyle, value } = _a, rest = __rest(_a, ["segmentStyle", "value"]);
     const type = valueToType(value);
     const segments = type && valueToSegments(value); // {A: true, ...}
-    const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-filament': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.filament, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration }, rest.style);
+    const sx = Object.assign({ '--segment-color': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.color, '--segment-color-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.colorOff, '--segment-thickness': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.thickness, '--segment-spacing': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.spacing, '--segment-length': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.length, '--segment-filament': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.filament, '--segment-opacity-on': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOn, '--segment-opacity-off': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.opacityOff, '--segment-transition-duration': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.transitionDuration, '--segment-corner-shift': segmentStyle === null || segmentStyle === void 0 ? void 0 : segmentStyle.cornerShift }, rest.style);
     if (type === 'digit')
         return (0, jsx_runtime_1.jsx)(components_1.DigitSegments, Object.assign({}, rest, segments, { style: sx }));
     if (type === 'colon')
@@ -32,7 +32,7 @@ const Digit = (_a) => {
         return (0, jsx_runtime_1.jsx)(components_1.AmpmSegments, Object.assign({}, rest, segments, { style: sx }));
     if (type === 'dot')
         return (0, jsx_runtime_1.jsx)(components_1.DotSegments, Object.assign({}, rest, segments, { style: sx }));
-    console.warn(`Digit.tsx: incompatible value: ${value.toString()}`);
+    console.warn(`(at Digit.tsx) incompatible value: ${value.toString()}`);
     return (0, jsx_runtime_1.jsx)("div", Object.assign({}, rest, { className: (0, clsx_1.default)('digit unknown', rest.className) }));
 };
 exports.Digit = Digit;

package/lib/Digit/digit.css

@@ -9,20 +9,21 @@
 .digit {
   --color: var(--segment-color, currentColor);
   --color-off: var(--segment-color-off, var(--color));
-  --thick: var(--segment-thickness, 0.25rem); /* =4px */
-  --length: var(--segment-length, 1rem);
-  --spacing: var(--segment-spacing, 0.0625rem); /* =1px */
-  --filament: var(--segment-filament, 0rem); /* vertical squeeze for A, D */
+  --thickness: var(--segment-thickness, 0.25em); /* =4px */
+  --length: var(--segment-length, 1em);
+  --spacing: var(--segment-spacing, 0.0625em); /* =1px */
+  --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
   --opacity-on: var(--segment-opacity-on, 1);
   --opacity-off: var(--segment-opacity-off, 0.1);
   --transition-duration: var(--segment-transition-duration, 0.25s);
-  /* distortion of diamond, -0.5...0.5 */
-  --corner-shift: var(--diamond-corner-shift, 0.2);
+  /* distortion of diamond corners */
+  --corner-shift: var(--segment-corner-shift, 0em);
 
   --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
   --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
 
   /* computed values */
+  --thick: var(--thickness);
   --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
   --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
 
@@ -91,7 +92,7 @@
   /* segments */
   .segment {
     --th-half-100: calc(100% - var(--th-half));
-    --shft: calc(var(--thick) * var(--corner-shift));
+    --shft: var(--corner-shift);
 
     background-color: var(--color);
     display: block;

package/lib/Digit/digit.css.js

@@ -0,0 +1,333 @@
+/* This file is auto-generated */
+
+const css = {
+  src: `src/Digit/digit.css`,
+  hash: `21rs68w6m0r`,
+  content: `
+/**
+ *    A
+ *  F   B      D2      AM
+ *    G 
+ *  E   C      D1      PM
+ *    D       DP
+ */
+
+.digit {
+  --color: var(--segment-color, currentColor);
+  --color-off: var(--segment-color-off, var(--color));
+  --thickness: var(--segment-thickness, 0.25em); /* =4px */
+  --length: var(--segment-length, 1em);
+  --spacing: var(--segment-spacing, 0.0625em); /* =1px */
+  --filament: var(--segment-filament, 0em); /* vertical squeeze for A, D */
+  --opacity-on: var(--segment-opacity-on, 1);
+  --opacity-off: var(--segment-opacity-off, 0.1);
+  --transition-duration: var(--segment-transition-duration, 0.25s);
+  /* distortion of diamond corners */
+  --corner-shift: var(--segment-corner-shift, 0em);
+
+  --svg-am: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><polyline class="st0" points="1.4,11.5 1.4,11.4 3.8,3.5 4.2,3.5 6.6,11.4 6.6,11.5 "/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/><line class="st0" x1="2.6" y1="9.5" x2="5.4" y2="9.5"/></svg>');
+  --svg-pm: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 16 16" xml:space="preserve"><style type="text/css">.st0{fill:none;stroke:black;stroke-linecap:square;stroke-linejoin:round;stroke-miterlimit:10;stroke-width:1;}</style><path class="st0" d="M1.5,11.5V3.4h2.1c1.6,0,2.5,1,2.5,2.2s-1,2.3-2.5,2.3H2.2"/><polyline class="st0" points="14.5,11.5 14.5,3.5 14.1,3.5 11.5,9.9 11.3,9.9 8.9,3.5 8.5,3.5 8.5,11.5 "/></svg>');
+
+  /* computed values */
+  --thick: var(--thickness);
+  --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
+  --digit-height: calc(var(--length) * 2 + var(--thick) + var(--spacing) * 2);
+
+  --thick-minus: calc(var(--thick) * -1);
+  --th-half: calc(var(--thick) / 2);
+  --th-half-minus: calc(var(--th-half) * -1);
+  --spacing-minus: calc(var(--spacing) * -1);
+  --sp-half: calc(var(--spacing) / 2);
+  --sp-half-minus: calc(var(--sp-half) * -1);
+
+  --radius-round: calc(var(--thick) * 0.33);
+  --radius-pill: 100em;
+
+  display: inline-block;
+  position: relative;
+  width: var(--digit-width);
+  height: var(--digit-height);
+
+  /* prevents flex-shrink effect */
+  min-width: var(--digit-width);
+  min-height: var(--digit-height);
+
+  &.unknown {
+    width: var(--thick);
+    min-width: var(--thick);
+  }
+
+  .opacity-wrapper {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+
+  .opacity-wrapper,
+  .opacity-wrapper .segment {
+    transition-property: background-color, border-color, opacity, visibility;
+    transition-duration: var(--transition-duration);
+  }
+
+  .opacity-wrapper.off.on .segment.off,
+  .opacity-wrapper.on .segment.off,
+  .opacity-wrapper.off .segment.on {
+    visibility: hidden;
+  }
+  .opacity-wrapper.off .segment.off,
+  .opacity-wrapper.on .segment.on {
+    visibility: visible;
+  }
+
+  .opacity-wrapper.on {
+    opacity: var(--opacity-on);
+  }
+  .opacity-wrapper.off {
+    opacity: var(--opacity-off);
+  }
+  .opacity-wrapper.off.on {
+    opacity: 0;
+  }
+  .opacity-wrapper.on:not(.off) .segment.on {
+    opacity: 1;
+  }
+  .opacity-wrapper.on:not(.off) .segment.off {
+    opacity: 0;
+  }
+
+  /* segments */
+  .segment {
+    --th-half-100: calc(100% - var(--th-half));
+    --shft: var(--corner-shift);
+
+    background-color: var(--color);
+    display: block;
+    position: absolute;
+
+    &.segment.off {
+      background-color: var(--color-off);
+      border-color: var(--color-off);
+    }
+    /* vertical segments */
+    &.vertical {
+      width: var(--thick);
+      height: var(--length);
+      left: 0;
+
+      &.B,
+      &.C {
+        left: auto;
+        right: 0;
+      }
+    }
+    &.E,
+    &.C {
+      bottom: calc(var(--th-half) + var(--sp-half));
+    }
+    &.F,
+    &.B {
+      top: calc(var(--th-half) + var(--sp-half));
+    }
+
+    /* horizontal segments */
+    &.horizontal {
+      width: var(--length);
+      height: var(--thick);
+      left: calc(var(--th-half) + var(--sp-half));
+
+      &.A,
+      &.D {
+        width: calc(var(--length) + var(--shft) * 2);
+        left: calc(var(--th-half) + var(--sp-half) - var(--shft));
+      }
+      &.A {
+        top: calc(var(--filament) + var(--shft));
+      }
+      &.D {
+        bottom: calc(var(--filament) + var(--shft));
+      }
+      &.G {
+        bottom: calc(var(--length) + var(--spacing));
+      }
+    }
+
+    /* spearheads */
+    &.horizontal {
+      clip-path: polygon(
+        0 50%,
+        var(--th-half) 0,
+        var(--th-half-100) 0,
+        100% 50%,
+        var(--th-half-100) 100%,
+        var(--th-half) 100%
+      );
+      &.A {
+        /* x y */
+        clip-path: polygon(
+          0 calc(50% - var(--shft)),
+          calc(var(--th-half) - var(--shft)) 0,
+          calc(var(--th-half-100) + var(--shft)) 0,
+          100% calc(50% - var(--shft)),
+          calc(var(--th-half-100) - var(--shft)) 100%,
+          calc(var(--th-half) + var(--shft)) 100%
+        );
+      }
+      &.D {
+        /* x y */
+        clip-path: polygon(
+          0 calc(50% + var(--shft)),
+          calc(var(--th-half) + var(--shft)) 0,
+          calc(var(--th-half-100) - var(--shft)) 0,
+          100% calc(50% + var(--shft)),
+          calc(var(--th-half-100) + var(--shft)) 100%,
+          calc(var(--th-half) - var(--shft)) 100%
+        );
+      }
+    }
+    &.vertical {
+      clip-path: polygon(
+        50% 0,
+        0 var(--th-half),
+        0 var(--th-half-100),
+        50% 100%,
+        100% var(--th-half-100),
+        100% var(--th-half)
+      );
+      &.B {
+        /* x y */
+        clip-path: polygon(
+          calc(50% + var(--shft)) 0,
+          0 calc(var(--th-half) + var(--shft)),
+          0 var(--th-half-100),
+          50% 100%,
+          100% var(--th-half-100),
+          100% calc(var(--th-half) - var(--shft))
+        );
+      }
+      &.C {
+        /* x y */
+        clip-path: polygon(
+          50% 0,
+          0 var(--th-half),
+          0 calc(var(--th-half-100) - var(--shft)),
+          calc(50% + var(--shft)) 100%,
+          100% calc(var(--th-half-100) + var(--shft)),
+          100% var(--th-half)
+        );
+      }
+      &.E {
+        /* x y */
+        clip-path: polygon(
+          50% 0,
+          0 var(--th-half),
+          0 calc(var(--th-half-100) + var(--shft)),
+          calc(50% - var(--shft)) 100%,
+          100% calc(var(--th-half-100) - var(--shft)),
+          100% var(--th-half)
+        );
+      }
+      &.F {
+        /* x y */
+        clip-path: polygon(
+          calc(50% - var(--shft)) 0,
+          0 calc(var(--th-half) - var(--shft)),
+          0 var(--th-half-100),
+          50% 100%,
+          100% var(--th-half-100),
+          100% calc(var(--th-half) + var(--shft))
+        );
+      }
+    }
+  }
+
+  /* segment shapes */
+  &.shape-rect .segment.segment {
+    clip-path: unset;
+  }
+  &.shape-round .segment.segment {
+    border-radius: var(--radius-round);
+    clip-path: unset;
+  }
+  &.shape-pill .segment.segment {
+    border-radius: var(--radius-pill);
+    clip-path: unset;
+  }
+
+  &.ampm {
+    --digit-width: calc(var(--length) + var(--thick) + var(--spacing));
+
+    .segment {
+      background: var(--color);
+      width: var(--digit-width);
+      height: var(--length);
+
+      mask-origin: fill-box;
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size:
+        auto 85%,
+        contain;
+    }
+
+    .AM {
+      bottom: calc(var(--digit-height) / 2 + var(--thick) / 4);
+      mask-image: var(--svg-am);
+    }
+    &.shape-rect .AM,
+    &.shape-pill .AM,
+    &.shape-round .AM {
+      mask-composite: exclude;
+      mask-image: var(--svg-am), linear-gradient(var(--color) 0 0);
+    }
+    .PM {
+      top: calc(var(--digit-height) / 2 + var(--thick) / 4);
+      mask-image: var(--svg-pm);
+    }
+    &.shape-rect .PM,
+    &.shape-pill .PM,
+    &.shape-round .PM {
+      mask-composite: exclude;
+      mask-image: var(--svg-pm), linear-gradient(var(--color) 0 0);
+    }
+    &.shape-round .segment {
+      border-radius: var(--radius-round);
+    }
+    &.shape-pill .segment {
+      border-radius: var(--radius-pill);
+    }
+  }
+
+  &.dot,
+  &.colon {
+    --digit-width: calc(var(--thick) * 3);
+
+    & .segment {
+      --dot-border-width: calc(var(--thick) * 0.6);
+
+      border: var(--dot-border-width) solid var(--color); /* dot made from border to have same size on zoom */
+      position: absolute;
+      width: 0;
+      height: 0;
+      left: calc(var(--digit-width) / 2 - var(--dot-border-width));
+    }
+    /* lower part of a colon */
+    .segment.D1 {
+      top: calc(var(--digit-height) / 3 - var(--thick) / 2);
+    }
+    /* upper part of a colon */
+    .segment.D2 {
+      bottom: calc(var(--digit-height) / 3 - var(--thick) / 2);
+    }
+    /* dot itself */
+    .segment.DP {
+      bottom: 0;
+    }
+    &.shape-default .segment {
+      border-radius: var(--radius-pill);
+    }
+  }
+}
+`,
+};
+
+export default css;

package/lib/Digit/useStyleInjection.d.ts

@@ -1,4 +1,16 @@
-declare const useHeadStyleInjection: (css: string, id: string, dependencies?: never[], scoped?: boolean) => {
-    "data-style-scope-id": string;
+type Style = {
+    id: string;
+    content: string;
 };
+declare const useHeadStyleInjection: (css: string, cssHash: string, dependencies?: never[], scoped?: boolean) => {
+    [x: string]: boolean | undefined;
+};
+export declare class StyleInjector {
+    #private;
+    private static instance;
+    constructor();
+    add(s: Style): void;
+    remove(s: Style): void;
+    has(s: Style): boolean;
+}
 export default useHeadStyleInjection;

package/lib/Digit/useStyleInjection.js

@@ -4,67 +4,84 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _StyleInjectionState_state;
+var _StyleInjector_state;
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyleInjector = void 0;
 const react_1 = require("react");
-const scopeAttribute = 'data-style-scope-id';
+const scopeAttributePrefix = 'data-style-scope-';
 // Runtime style injection
-const useHeadStyleInjection = (css, id, dependencies = [], scoped = true // isolate css behind @scope
+const useHeadStyleInjection = (css, cssHash, dependencies = [], scoped = true // isolate css behind @scope
 ) => {
-    const injected = new StyleInjectionState(); // singleton's state
-    const _id = `_${id}`; // safe id to make CSS selectors work
+    const injector = new StyleInjector(); // singleton!
+    const scopeAttribute = `${scopeAttributePrefix}-${cssHash}`;
     const style = {
-        id: `inject_id_${_id}`, // hash of css content
-        css: scoped ? wrapWithScope(css, _id) : css,
+        id: `css_id__${cssHash}`,
+        content: scoped ? wrapWithScope(css, scopeAttribute) : css,
     };
     (0, react_1.useInsertionEffect)(() => {
-        injected.add(style);
-        return () => injected.remove(style);
+        injector.add(style);
+        return () => injector.remove(style);
     }, dependencies);
     return {
-        [scopeAttribute]: _id,
+        [scopeAttribute]: scoped ? true : undefined,
     };
 };
-class StyleInjectionState {
+class StyleInjector {
     constructor() {
-        _StyleInjectionState_state.set(this, {
-            injected: new Set(),
-        });
-        if (!StyleInjectionState.instance) {
-            StyleInjectionState.instance = this; // create first instance if needed
+        _StyleInjector_state.set(this, new Map());
+        if (!StyleInjector.instance) {
+            StyleInjector.instance = this;
         }
-        return StyleInjectionState.instance;
+        return StyleInjector.instance;
     }
     add(s) {
-        if (!this.has(s)) {
-            __classPrivateFieldGet(this, _StyleInjectionState_state, "f").injected.add(s.id);
-            document.head.appendChild(createStyleElement(s.css, s.id));
+        if (this.has(s)) {
+            const count = __classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) + 1;
+            __classPrivateFieldGet(this, _StyleInjector_state, "f").set(s.id, count);
+        }
+        else {
+            __classPrivateFieldGet(this, _StyleInjector_state, "f").set(s.id, 1);
+        }
+        if (__classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) === 1) {
+            document.head.appendChild(createStyleElement(s));
         }
     }
     remove(s) {
         var _a;
         if (this.has(s)) {
-            __classPrivateFieldGet(this, _StyleInjectionState_state, "f").injected.delete(s.id);
+            const count = __classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) - 1;
+            __classPrivateFieldGet(this, _StyleInjector_state, "f").set(s.id, count);
+        }
+        else {
+            console.warn(`(at useStyleInjection.ts) unable to remove style: ${s.id}`);
+        }
+        if (__classPrivateFieldGet(this, _StyleInjector_state, "f").get(s.id) === 0) {
             (_a = document.head.querySelector(`#${s.id}`)) === null || _a === void 0 ? void 0 : _a.remove();
         }
     }
     has(s) {
-        return __classPrivateFieldGet(this, _StyleInjectionState_state, "f").injected.has(s.id);
+        return __classPrivateFieldGet(this, _StyleInjector_state, "f").has(s.id);
     }
 }
-_StyleInjectionState_state = new WeakMap();
-const createStyleElement = (content, id = '') => {
+exports.StyleInjector = StyleInjector;
+_StyleInjector_state = new WeakMap();
+const createStyleElement = (style) => {
     const el = document.createElement('style');
-    el.innerHTML = content;
-    if (id !== '')
-        el.id = id;
+    el.innerHTML = style.content;
+    if (style.id !== '')
+        el.id = style.id;
     return el;
 };
-const wrapWithScope = (rules, _id) => {
-    const isolated = `@scope ([${scopeAttribute}=${_id}]) {
-      :scope { display: contents; }
-      ${rules}
-    }`;
+const wrapWithScope = (css, scopeAttribute) => {
+    // unused bc @scope at-rule does not work in Firefox
+    const scoped = `@scope ([${scopeAttribute}]) {` +
+        `:scope { display: contents; }` +
+        `${css}` +
+        `}`;
+    const isolated = `[${scopeAttribute}] { display: contents; }` +
+        `[${scopeAttribute}] {` +
+        `${css}` +
+        `}`;
     return isolated;
 };
 exports.default = useHeadStyleInjection;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-led-digit",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "react component for 7-segment display (digit), includes dot, colon and am-pm digits",
   "main": "./lib/index.js",
   "files": [
@@ -11,7 +11,7 @@
     "build-storybook": "storybook build",
     "build-ts": "tsc --project tsconfig.build.json",
     "clean": "rimraf lib",
-    "css-copy": "npx cpy src/**/*.css lib",
+    "css-copy": "npx cpy src/**/*.css lib && npx cpy src/**/*.css.* lib",
     "css-to-js-watch": "node css-to-js --watch",
     "css-to-js": "node css-to-js",
     "dev": "npm-run-all --parallel storybook css-to-js-watch",
@@ -36,16 +36,9 @@
   "engines": {
     "node": ">=12.0"
   },
-  "keywords": [
-    "7-segment",
-    "led",
-    "digit",
-    "react",
-    "component",
-    "seven-segments",
-    "display",
-    "clock"
-  ],
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
   "devDependencies": {
     "@chromatic-com/storybook": "^1.6.1",
     "@storybook/addon-essentials": "^8.2.4",
@@ -61,7 +54,6 @@
     "@typescript-eslint/eslint-plugin": "^7.16.1",
     "@typescript-eslint/parser": "^7.16.1",
     "chokidar": "^4.0.1",
-    "clsx": "^2.1.1",
     "cpy-cli": "^5.0.0",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
@@ -79,6 +71,16 @@
     "ts-jest": "^29.2.3",
     "typescript": "^5.5.3"
   },
+  "keywords": [
+    "7-segment",
+    "led",
+    "digit",
+    "react",
+    "component",
+    "seven-segments",
+    "display",
+    "clock"
+  ],
   "lint-staged": {
     "*.ts": "eslint --cache --cache-location .eslintcache --fix"
   },