arcane-os 0.1.0-dev.5

package/runtime/arcane/css/primitives.css

@@ -0,0 +1,321 @@
+:root,
+:host{
+    --arcane-space-1:.25rem;
+    --arcane-space-2:.5rem;
+    --arcane-space-3:.75rem;
+    --arcane-space-4:1rem;
+    --arcane-space-5:1.5rem;
+    --arcane-space-6:2rem;
+    --arcane-radius-small:.35rem;
+    --arcane-radius-medium:.65rem;
+    --arcane-radius-large:1rem;
+    --arcane-surface:var(--background,#fff);
+    --arcane-surface-raised:var(--modal-background,var(--background,#fff));
+    --arcane-surface-muted:color-mix(in srgb,var(--arcane-surface) 92%,currentColor 8%);
+    --arcane-border:var(--border-color,color-mix(in srgb,currentColor 22%,transparent));
+    --arcane-shadow-color:var(--shadow-color,rgba(0,0,0,.2));
+    --arcane-shadow-small:0 .12rem .35rem var(--arcane-shadow-color);
+    --arcane-shadow-medium:0 .5rem 1.5rem var(--arcane-shadow-color);
+    --arcane-action:var(--primary-color,#365f91);
+    --arcane-action-text:var(--button-text-color,#fff);
+    --arcane-secondary:var(--secondary-color,color-mix(in srgb,var(--arcane-action) 15%,var(--arcane-surface)));
+    --arcane-secondary-text:var(--text-color,currentColor);
+    --arcane-muted:var(--muted-text-color,color-mix(in srgb,currentColor 65%,transparent));
+    --arcane-success:var(--success-color,#277a4b);
+    --arcane-warning:var(--warning-color,#9a6500);
+    --arcane-danger:var(--danger-color,#a53838);
+    --arcane-review:var(--review-color,#8555a5);
+    --arcane-focus:var(--focus-color,var(--arcane-action));
+}
+
+:where(.arcane-button){
+    align-items:center;
+    appearance:none;
+    background:var(--arcane-action);
+    border:1px solid transparent;
+    border-radius:var(--arcane-radius-medium);
+    box-shadow:var(--arcane-shadow-small);
+    box-sizing:border-box;
+    color:var(--arcane-action-text);
+    cursor:pointer;
+    display:inline-flex;
+    font:inherit;
+    font-weight:650;
+    gap:var(--arcane-space-2);
+    justify-content:center;
+    line-height:1.2;
+    min-height:2.5rem;
+    padding:.65rem 1rem;
+    text-decoration:none;
+    transition:background-color 160ms ease,border-color 160ms ease,box-shadow 160ms ease,opacity 160ms ease,transform 160ms ease;
+}
+
+:where(.arcane-button):hover:not(:disabled){
+    filter:brightness(1.06);
+}
+
+:where(.arcane-button):active:not(:disabled){
+    box-shadow:none;
+    transform:translateY(1px);
+}
+
+:where(.arcane-button):focus-visible,
+:where(.arcane-icon-button,.arcane-close-button):focus-visible{
+    outline:3px solid color-mix(in srgb,var(--arcane-focus) 42%,transparent);
+    outline-offset:2px;
+}
+
+:where(.arcane-button):disabled,
+:where(.arcane-icon-button,.arcane-close-button):disabled{
+    cursor:not-allowed;
+    opacity:.55;
+}
+
+:where(.arcane-button--action){
+    background:var(--arcane-action);
+    color:var(--arcane-action-text);
+}
+
+:where(.arcane-button--secondary){
+    background:var(--arcane-secondary);
+    border-color:var(--arcane-border);
+    color:var(--arcane-secondary-text);
+}
+
+:where(.arcane-button--tertiary){
+    background:transparent;
+    border-color:transparent;
+    box-shadow:none;
+    color:var(--arcane-action);
+}
+
+:where(.arcane-icon-button,.arcane-close-button){
+    align-items:center;
+    appearance:none;
+    background:transparent;
+    border:1px solid transparent;
+    border-radius:999px;
+    color:inherit;
+    cursor:pointer;
+    display:inline-flex;
+    font:inherit;
+    height:2.5rem;
+    justify-content:center;
+    padding:0;
+    width:2.5rem;
+}
+
+:where(.arcane-icon-button,.arcane-close-button):hover:not(:disabled){
+    background:var(--arcane-secondary);
+    border-color:var(--arcane-border);
+}
+
+.arcane-card{
+    background:var(--arcane-surface-raised);
+    border:1px solid var(--arcane-border);
+    border-radius:var(--arcane-radius-large);
+    box-shadow:var(--arcane-shadow-small);
+    color:inherit;
+    min-width:0;
+}
+
+:where(.arcane-card__header,.arcane-card__body,.arcane-card__footer){
+    box-sizing:border-box;
+    padding:var(--arcane-space-4);
+}
+
+.arcane-card__header{
+    align-items:flex-start;
+    border-bottom:1px solid var(--arcane-border);
+    display:flex;
+    gap:var(--arcane-space-3);
+    justify-content:space-between;
+}
+
+.arcane-card__footer{
+    align-items:center;
+    border-top:1px solid var(--arcane-border);
+    display:flex;
+    flex-wrap:wrap;
+    gap:var(--arcane-space-2);
+    justify-content:flex-end;
+}
+
+:where(.arcane-view-heading,.arcane-section-heading){
+    color:inherit;
+    line-height:1.15;
+    margin:0;
+    text-wrap:balance;
+}
+
+.arcane-view-heading{
+    font-size:clamp(1.65rem,3vw,2.35rem);
+}
+
+.arcane-section-heading{
+    font-size:clamp(1.1rem,2vw,1.4rem);
+}
+
+.arcane-form-grid{
+    display:grid;
+    gap:var(--arcane-space-4);
+    grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));
+}
+
+.arcane-field{
+    align-content:start;
+    display:grid;
+    gap:var(--arcane-space-2);
+    min-width:0;
+}
+
+.arcane-field>label,
+.arcane-field>.arcane-field__label{
+    font-weight:650;
+}
+
+.arcane-field :where(input,select,textarea){
+    background:var(--arcane-surface);
+    border:1px solid var(--arcane-border);
+    border-radius:var(--arcane-radius-small);
+    box-sizing:border-box;
+    color:inherit;
+    font:inherit;
+    max-width:100%;
+    padding:.65rem .75rem;
+    width:100%;
+}
+
+.arcane-field :where(input,select,textarea):focus-visible{
+    border-color:var(--arcane-focus);
+    outline:3px solid color-mix(in srgb,var(--arcane-focus) 25%,transparent);
+    outline-offset:1px;
+}
+
+:where(.arcane-help,.arcane-form-note){
+    color:var(--arcane-muted);
+    font-size:.9rem;
+    line-height:1.45;
+    margin:0;
+}
+
+.arcane-form-note{
+    background:var(--arcane-surface-muted);
+    border-inline-start:.25rem solid var(--arcane-border);
+    border-radius:var(--arcane-radius-small);
+    padding:var(--arcane-space-3) var(--arcane-space-4);
+}
+
+.arcane-status-light{
+    background:var(--arcane-muted);
+    border-radius:999px;
+    box-shadow:0 0 0 .2rem color-mix(in srgb,currentColor 9%,transparent);
+    display:inline-block;
+    height:.65rem;
+    width:.65rem;
+}
+
+.arcane-status-light[data-status="success"],
+.arcane-status-light[data-status="complete"]{background:var(--arcane-success)}
+.arcane-status-light[data-status="warning"],
+.arcane-status-light[data-status="pending"]{background:var(--arcane-warning)}
+.arcane-status-light[data-status="error"],
+.arcane-status-light[data-status="failed"]{background:var(--arcane-danger)}
+.arcane-status-light[data-status="review"]{background:var(--arcane-review)}
+
+:where(.arcane-pill,.arcane-badge,.arcane-count){
+    align-items:center;
+    background:var(--arcane-secondary);
+    border:1px solid var(--arcane-border);
+    border-radius:999px;
+    color:var(--arcane-secondary-text);
+    display:inline-flex;
+    font-size:.82rem;
+    font-weight:650;
+    gap:var(--arcane-space-1);
+    line-height:1;
+    min-height:1.55rem;
+    padding:.2rem .55rem;
+    white-space:nowrap;
+}
+
+.arcane-badge[data-status="success"],
+.arcane-pill[data-status="success"]{border-color:var(--arcane-success);color:var(--arcane-success)}
+.arcane-badge[data-status="warning"],
+.arcane-pill[data-status="warning"]{border-color:var(--arcane-warning);color:var(--arcane-warning)}
+.arcane-badge[data-status="error"],
+.arcane-pill[data-status="error"]{border-color:var(--arcane-danger);color:var(--arcane-danger)}
+.arcane-badge[data-status="review"],
+.arcane-pill[data-status="review"]{border-color:var(--arcane-review);color:var(--arcane-review)}
+
+.arcane-count{
+    font-variant-numeric:tabular-nums;
+    justify-content:center;
+    min-width:1.55rem;
+    padding-inline:.4rem;
+}
+
+.arcane-state{
+    align-items:center;
+    background:var(--arcane-surface-muted);
+    border:1px dashed var(--arcane-border);
+    border-radius:var(--arcane-radius-medium);
+    color:var(--arcane-muted);
+    display:flex;
+    gap:var(--arcane-space-3);
+    justify-content:center;
+    line-height:1.45;
+    min-height:5rem;
+    padding:var(--arcane-space-4);
+    text-align:center;
+}
+
+:where(.arcane-state--empty,.arcane-empty){}
+:where(.arcane-state--loading,.arcane-loading){color:var(--arcane-action)}
+:where(.arcane-state--error,.arcane-error){border-color:var(--arcane-danger);color:var(--arcane-danger)}
+:where(.arcane-state--review,.arcane-review-needed){border-color:var(--arcane-review);color:var(--arcane-review)}
+
+:where(.arcane-state--loading,.arcane-loading)::before{
+    animation:arcane-spin .8s linear infinite;
+    border:.18rem solid color-mix(in srgb,currentColor 25%,transparent);
+    border-radius:999px;
+    border-top-color:currentColor;
+    box-sizing:border-box;
+    content:"";
+    flex:0 0 auto;
+    height:1.15rem;
+    width:1.15rem;
+}
+
+[hidden]{
+    display:none!important;
+}
+
+@keyframes arcane-spin{
+    to{transform:rotate(1turn)}
+}
+
+@media(max-width:36rem){
+    .arcane-card__header{
+        align-items:stretch;
+        flex-direction:column;
+    }
+
+    .arcane-card__footer{
+        align-items:stretch;
+        flex-direction:column;
+    }
+
+    .arcane-card__footer>.arcane-button{
+        width:100%;
+    }
+}
+
+@media(prefers-reduced-motion:reduce){
+    *,*::before,*::after{
+        animation-duration:.01ms!important;
+        animation-iteration-count:1!important;
+        scroll-behavior:auto!important;
+        transition-duration:.01ms!important;
+    }
+}

package/runtime/arcane/css/theme.css

@@ -0,0 +1,112 @@
+/* Arcane OS shared appearance layer.
+ * Load after legacy layout.css (when used) and before primitives or app CSS.
+ * Explicit user preferences use data-color-scheme; otherwise the device
+ * preference selects the light or dark base.
+ */
+
+:root,
+:root[data-color-scheme="light"]{
+    color-scheme:light;
+    --background:rgb(244, 246, 251);
+    --modal-background:rgb(255, 255, 255);
+    --text-color:rgb(23, 34, 56);
+    --primary-color:rgb(23, 34, 56);
+    --secondary-color:rgb(229, 233, 243);
+    --accent-color:var(--focus-color);
+    --button-text-color:rgb(255, 255, 255);
+    --border-color:rgb(203, 211, 226);
+    --focus-color:rgb(118, 87, 213);
+    --muted-text-color:rgb(95, 107, 130);
+    --success-color:rgb(39, 122, 75);
+    --warning-color:rgb(154, 101, 0);
+    --danger-color:rgb(165, 56, 56);
+    --review-color:rgb(133, 85, 165);
+    --shadow-color:rgba(23, 34, 56, .16);
+    --platinum:rgb(102, 112, 133);
+    --icon-filter:none;
+    --file-icon-filter:hue-rotate(8deg) saturate(.62) brightness(.86);
+}
+
+:root[data-color-scheme="dark"]{
+    color-scheme:dark;
+    --background:rgb(13, 18, 32);
+    --modal-background:rgb(21, 28, 45);
+    --text-color:rgb(237, 241, 250);
+    --primary-color:rgb(36, 43, 66);
+    --secondary-color:rgb(26, 33, 52);
+    --accent-color:var(--focus-color);
+    --button-text-color:rgb(255, 255, 255);
+    --border-color:rgb(59, 69, 94);
+    --focus-color:rgb(171, 148, 255);
+    --muted-text-color:rgb(174, 184, 204);
+    --success-color:rgb(97, 201, 144);
+    --warning-color:rgb(233, 184, 95);
+    --danger-color:rgb(240, 128, 128);
+    --review-color:rgb(198, 165, 242);
+    --shadow-color:rgba(0, 0, 0, .42);
+    --platinum:rgb(155, 167, 189);
+    --icon-filter:invert(.9) saturate(.7);
+    --file-icon-filter:invert(.84) sepia(.08) saturate(.72) hue-rotate(184deg) brightness(1.04);
+}
+
+@media (prefers-color-scheme:dark){
+    :root:not([data-color-scheme]){
+        color-scheme:dark;
+        --background:rgb(13, 18, 32);
+        --modal-background:rgb(21, 28, 45);
+        --text-color:rgb(237, 241, 250);
+        --primary-color:rgb(36, 43, 66);
+        --secondary-color:rgb(26, 33, 52);
+        --accent-color:var(--focus-color);
+        --button-text-color:rgb(255, 255, 255);
+        --border-color:rgb(59, 69, 94);
+        --focus-color:rgb(171, 148, 255);
+        --muted-text-color:rgb(174, 184, 204);
+        --success-color:rgb(97, 201, 144);
+        --warning-color:rgb(233, 184, 95);
+        --danger-color:rgb(240, 128, 128);
+        --review-color:rgb(198, 165, 242);
+        --shadow-color:rgba(0, 0, 0, .42);
+        --platinum:rgb(155, 167, 189);
+        --icon-filter:invert(.9) saturate(.7);
+        --file-icon-filter:invert(.84) sepia(.08) saturate(.72) hue-rotate(184deg) brightness(1.04);
+    }
+}
+
+html{
+    background:var(--background);
+    color:var(--text-color);
+}
+
+body{
+    background-color:var(--background);
+    color:var(--text-color);
+}
+
+@media (prefers-reduced-motion:reduce){
+    :root:not([data-reduce-motion="false"]){
+        scroll-behavior:auto;
+    }
+
+    :root:not([data-reduce-motion="false"]) *,
+    :root:not([data-reduce-motion="false"]) *::before,
+    :root:not([data-reduce-motion="false"]) *::after{
+        animation-duration:.01ms !important;
+        animation-iteration-count:1 !important;
+        scroll-behavior:auto !important;
+        transition-duration:.01ms !important;
+    }
+}
+
+:root[data-reduce-motion="true"]{
+    scroll-behavior:auto;
+}
+
+:root[data-reduce-motion="true"] *,
+:root[data-reduce-motion="true"] *::before,
+:root[data-reduce-motion="true"] *::after{
+    animation-duration:.01ms !important;
+    animation-iteration-count:1 !important;
+    scroll-behavior:auto !important;
+    transition-duration:.01ms !important;
+}

package/runtime/arcane/css/utility-workspace.css

@@ -0,0 +1 @@
+*{box-sizing:border-box}body{margin:0;min-height:100vh;background:var(--background);color:var(--text-color)}main.utility-shell{display:grid;gap:var(--arcane-space-5);margin:auto;max-width:96rem;min-height:calc(100vh - 4.25rem);padding:clamp(1rem,3vw,2.5rem)}.utility-heading{align-items:end;display:flex;gap:var(--arcane-space-4);justify-content:space-between}.utility-heading h1{font-size:clamp(2rem,5vw,3.5rem);line-height:1;margin:0}.utility-heading p{color:var(--arcane-muted);margin:.5rem 0 0}.utility-stage{min-height:32rem}.utility-stage>html-import{display:block;height:100%;min-height:inherit}.utility-controls{display:flex;flex-wrap:wrap;gap:var(--arcane-space-3)}.eyebrow{font-size:.75rem!important;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}@media(max-width:42rem){.utility-heading{align-items:flex-start;flex-direction:column}}

package/runtime/arcane/entities/ApiModelRecord.js

@@ -0,0 +1,20 @@
+function deepFreeze(value){
+    if(!value||typeof value!=='object'||Object.isFrozen(value)) return value;
+    for(const child of Object.values(value)) deepFreeze(child);
+    return Object.freeze(value);
+}
+
+export default class ApiModelRecord{
+    constructor({endpoint,fetchedAt=new Date(),metadata={},value=null}={}){
+        const url=new URL(String(endpoint||''));
+        if(!['http:','https:'].includes(url.protocol)) throw new TypeError('API model endpoints must use HTTP or HTTPS.');
+        const instant=new Date(fetchedAt);
+        if(Number.isNaN(instant.valueOf())) throw new TypeError('API model fetch time is invalid.');
+        this.endpoint=url.href;
+        this.fetchedAt=instant.toISOString();
+        this.metadata=deepFreeze({...metadata});
+        this.value=deepFreeze(value);
+        Object.freeze(this);
+    }
+    toJSON(){return {endpoint:this.endpoint,fetchedAt:this.fetchedAt,metadata:this.metadata,value:this.value};}
+}

package/runtime/arcane/entities/Calculation.js

@@ -0,0 +1,13 @@
+export default class Calculation{
+    constructor({expression,result,createdAt=new Date()}={}){
+        this.expression=String(expression??'').trim();
+        if(!this.expression||this.expression.length>512) throw new TypeError('Calculation expressions must contain 1-512 characters.');
+        this.result=Number(result);
+        if(!Number.isFinite(this.result)) throw new RangeError('Calculation result must be finite.');
+        const instant=new Date(createdAt);
+        if(Number.isNaN(instant.valueOf())) throw new TypeError('Calculation time is invalid.');
+        this.createdAt=instant.toISOString();
+        Object.freeze(this);
+    }
+    toJSON(){return {...this};}
+}