arcane-os 0.5.12 → 0.5.13

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 ## Unreleased
 
+## 0.5.13
+
+- Derive local browser resource queries from the selected SDK package version
+  across managed import maps, runtime materialization, source serving and
+  packaged application resource graphs. Preserve existing query parameters,
+  fragments and ordinary caching; revalidate entry documents on navigation.
+- Carry component and Worker module references through the same versioned
+  paths. Preserve fetched document/attachment content, CSS comments and text,
+  remote URLs, model data and user storage. Existing open documents adopt the
+  new resource graph on ordinary refresh or navigation, without a forced reload.
+
 ## 0.5.12
 
 - Add optional `voice`, `speed`, `pauseAfterMs`, and `waitForPlayback` fields to

package/docs/reference/asset-versioning.md

@@ -0,0 +1,69 @@
+# Release-derived browser asset URLs
+
+The SDK's public import-map generator, runtime materializer, source server and
+application packager use the selected SDK package version for local browser
+resource references. The query field is `arcaneVersion`. Its value comes from
+SDK package metadata, not a timestamp, content measurement, or application
+constant.
+
+For example, an existing `./arcane/modules/HTMLImport.js?v=6#module` reference
+retains its application revision and fragment and gains
+`&arcaneVersion=${version}` before the fragment. Regenerating for another SDK
+release replaces only the `arcaneVersion` value. Existing query spelling and
+application parameters remain intact.
+
+## Public tooling
+
+- Run the installed SDK's `materializeInstalledSdkRuntime()` to refresh the
+  workspace runtime from that installation. Its generated local resource
+  references use the installed package version, including npm aliases.
+- Run `arcane import-map` through the installed SDK to regenerate the managed
+  import map and its application HTML. Named SDK imports and URL-shaped module
+  entries point to versioned resources.
+- `arcane dev` applies the same reference transformation to served source
+  without editing the source files. An explicit live SDK source mount uses the
+  version in that source checkout's `package.json`. Otherwise it uses the
+  materialized SDK version recorded by the workspace's existing semantic lock.
+- The application packager applies resource versioning after its selected
+  adapter finishes. The resulting application can be served by an ordinary
+  static host without a JavaScript transformation service.
+
+The shared transformation edits actual local module imports, resource URL
+construction, HTML resource attributes and CSS resource references. It does not
+change displayed text, prompts, application data, downloaded model content,
+remote provider URLs, or arbitrary strings that happen to resemble filenames.
+Worker entry references and their local module imports are versioned separately:
+Workers do not inherit a document's import map. `HTMLImport` carries its own
+release query into local dynamically loaded components and their resources.
+
+Computed application URLs that have no statically identifiable resource
+reference remain application-owned expressions. The SDK does not intercept
+global `fetch`, `URL`, `Worker`, or DOM APIs. An import-map URL entry can resolve
+an exact matching computed module URL, but is not a wildcard query rule.
+
+## Navigation and caching
+
+The SDK server sends `Cache-Control: no-cache` for application entry/managed
+HTML and managed import-map JSON. This allows storage but requests revalidation, so an ordinary navigation
+or refresh obtains the current entry document and release URLs. Other assets
+retain ordinary caching; no cache or user storage is cleared.
+
+An independently configured static host must likewise revalidate entry HTML
+and managed import-map JSON. The generated package supplies versioned resource
+references; it cannot configure another server's HTTP headers.
+
+An already-open document keeps modules it has evaluated. Versioned references
+take effect on ordinary navigation or refresh; they do not replace live module
+instances, force a reload, restart a model, or erase a conversation. The SDK does
+not retain earlier installed runtime trees after materialization.
+
+## Scope and work
+
+One invocation acts on the selected workspace/application. Runtime
+materialization reuses its existing recursive copy; packaging reuses its
+selected output inventory. Packaging follows resource references from the entry,
+managed application pages and SDK runtime. Source serving recognizes those
+resources and browser script/style/worker requests. Files included only as
+documents or attachments are not transformed merely because they contain HTML,
+JavaScript or CSS. Source serving transforms the requested resource response,
+not the entire workspace, and leaves source files unchanged.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcane-os",
-  "version": "0.5.12",
+  "version": "0.5.13",
   "description": "Arcane OS JavaScript SDK, project-local CLI, browser runtime, and repository-portable application packager.",
   "type": "module",
   "main": "./src/index.mjs",

package/runtime/arcane/components/calculator.html

@@ -1,7 +1,7 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>:host{display:block;max-width:34rem}.calculator{display:grid;gap:var(--arcane-space-3);padding:var(--arcane-space-4)}.display{display:grid;gap:var(--arcane-space-2)}.display input{font:600 1.3rem/1.4 ui-monospace,monospace;text-align:right}.result{min-height:2.5rem;margin:0;text-align:right;font-size:1.8rem;font-weight:750;overflow-wrap:anywhere}.keys{display:grid;gap:var(--arcane-space-2);grid-template-columns:repeat(5,1fr)}.keys button{min-width:0;padding:.7rem .35rem}.status{min-height:1.4rem;margin:0;color:var(--arcane-muted)}@media(max-width:28rem){.keys{grid-template-columns:repeat(4,1fr)}}</style>
 <section class="calculator arcane-card"><div class="display arcane-field"><label for="expression">Expression</label><input id="expression" inputmode="decimal" autocomplete="off" spellcheck="false" value=""><p id="result" class="result" aria-live="polite">0</p></div><div id="keys" class="keys" aria-label="Calculator keypad"></div><p id="status" class="status" role="status"></p></section>
-<script type="module">const host=this,root=host.shadowRoot,input=root.querySelector('#expression'),result=root.querySelector('#result'),status=root.querySelector('#status'),keys=root.querySelector('#keys');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/calculator.html',document.baseURI);const {default:CalculatorEngine}=await import(new URL('../modules/CalculatorEngine.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.calculator',eventTypes:['calculation-complete','calculation-error','calculator-ready']}),lifecycleController=new AbortController();const engine=new CalculatorEngine(),definitions=['7','8','9','/','sqrt(','4','5','6','*','^','1','2','3','-','%','0','.','(',')','+','pi','e','C','⌫','='];let destroyed=false,operationSequence=0;
+<script type="module">const host=this,root=host.shadowRoot,input=root.querySelector('#expression'),result=root.querySelector('#result'),status=root.querySelector('#status'),keys=root.querySelector('#keys');const {default:CalculatorEngine}=await import('../modules/CalculatorEngine.js');const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.calculator',eventTypes:['calculation-complete','calculation-error','calculator-ready']}),lifecycleController=new AbortController();const engine=new CalculatorEngine(),definitions=['7','8','9','/','sqrt(','4','5','6','*','^','1','2','3','-','%','0','.','(',')','+','pi','e','C','⌫','='];let destroyed=false,operationSequence=0;
 for(const value of definitions){const button=document.createElement('button');button.type='button';button.className=value==='='?'arcane-button':'arcane-button arcane-button--secondary';button.textContent=value;button.dataset.value=value;keys.append(button)}
 keys.addEventListener('click',event=>{const value=event.target.closest('[data-value]')?.dataset.value;if(!value)return;if(value==='C'){input.value='';result.textContent='0';status.textContent='';return}if(value==='⌫'){input.value=input.value.slice(0,-1);return}if(value==='='){calculate();return}input.value+=value;input.focus()},{signal:lifecycleController.signal});input.addEventListener('keydown',event=>{if(event.key==='Enter'){event.preventDefault();calculate()}},{signal:lifecycleController.signal});
 function nextOperationId(){operationSequence+=1;return `${events.descriptor.instanceId}:calculate:${operationSequence}`}

package/runtime/arcane/components/chart.html

@@ -162,16 +162,11 @@
 
 <script type="module">
     const host=this;
-    const componentURL=new URL(
-        host.getAttribute('href')||'./arcane/components/chart.html',
-        document.baseURI
-    );
-    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
-    const {default:loadChartLibrary}=await import(moduleURL('ChartLibrary.js'));
+    const {default:loadChartLibrary}=await import('../modules/ChartLibrary.js');
     const {
         normalizeChartOptions,
         normalizeChartRows
-    }=await import(moduleURL('ComponentContracts.js'));
+    }=await import('../modules/ComponentContracts.js');
     const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
     const events=createArcaneEventSource(host,{source:'arcane.component.chart',eventTypes:['chart-remove','chart-ready']});
     const lifecycleController=new AbortController();

package/runtime/arcane/components/dashboard-config.html

@@ -11,18 +11,13 @@
 
 <script type="module">
     const host=this;
-    const componentURL=new URL(
-        host.getAttribute('href')||'./arcane/components/dashboard-config.html',
-        document.baseURI
-    );
-    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
-    const {default:waitForComponent}=await import(moduleURL('WaitForComponent.js'));
+    const {default:waitForComponent}=await import('../modules/WaitForComponent.js');
     const {
         effectiveDashboardVisibility,
         normalizeDashboardDefinitions,
         normalizeDashboardOptions,
         normalizeDashboardVisibility
-    }=await import(moduleURL('ComponentContracts.js'));
+    }=await import('../modules/ComponentContracts.js');
     const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
     const events=createArcaneEventSource(host,{source:'arcane.component.dashboard-config',eventTypes:['dashboard-config-closed','dashboard-config-opened','dashboard-config-change','dashboard-config-ready']});
     const lifecycleController=new AbortController();
@@ -232,7 +227,7 @@
         const items=document.createElement('section');
 
         styles.rel='stylesheet';
-        styles.href='./arcane/css/dashboard-config.css?v=2';
+        styles.href=new URL('./arcane/css/dashboard-config.css?v=2',document.baseURI).href;
         heading.dataset.dashboardConfigHeading='';
         message.dataset.dashboardConfigDescription='';
         empty.className='dashboard-config-empty';

package/runtime/arcane/components/file-manager.html

@@ -825,8 +825,8 @@
         icon.className='tree-entry-icon';
         icon.alt='';
         icon.src=entry.kind==='directory'
-            ?'./arcane/img/folder.svg'
-            :'./arcane/img/doc.svg';
+            ?new URL('./arcane/img/folder.svg',document.baseURI).href
+            :new URL('./arcane/img/doc.svg',document.baseURI).href;
         name.className='tree-entry-name';
         name.innerText=entry.name;
         count.className='tree-file-count';
@@ -1404,7 +1404,7 @@
         deleteButton.innerText='Delete File';
         deleteIcon.alt='';
         deleteIcon.className='action-icon';
-        deleteIcon.src='./arcane/img/trash.svg';
+        deleteIcon.src=new URL('./arcane/img/trash.svg',document.baseURI).href;
         deleteButton.prepend(deleteIcon);
         deleteButton.addEventListener(
             'click',
@@ -1610,7 +1610,7 @@
 
         fileIcon.alt='';
         fileIcon.className='icon file-icon';
-        fileIcon.src='./arcane/img/doc.svg';
+        fileIcon.src=new URL('./arcane/img/doc.svg',document.baseURI).href;
         fileDetails.className='file-details';
         fileLabel.className='file-name';
         fileLabel.innerText=fileName;
@@ -1633,7 +1633,7 @@
 
         deleteIcon.alt='';
         deleteIcon.className='action-icon';
-        deleteIcon.src='./arcane/img/trash.svg';
+        deleteIcon.src=new URL('./arcane/img/trash.svg',document.baseURI).href;
 
         openButton.addEventListener(
             'click',
@@ -1933,7 +1933,7 @@
             directory.dataset.directory=tableName;
             folder.className='file folder';
             folderIcon.className='icon';
-            folderIcon.src='./arcane/img/folder.svg';
+            folderIcon.src=new URL('./arcane/img/folder.svg',document.baseURI).href;
             folderName.innerText=tableName;
             fileCount.className='file-count';
             fileCount.innerText=`${files.length} ${files.length===1?'file':'files'}`;

package/runtime/arcane/components/markdown-document.html

@@ -214,12 +214,7 @@
     const host=this;
     host.ready=false;
 
-    const componentURL=new URL(
-        host.getAttribute('href')||'./arcane/components/markdown-document.html',
-        document.baseURI
-    );
-    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
-    const {default:MD}=await import(moduleURL('MD.js?v=2'));
+    const {default:MD}=await import('../modules/MD.js?v=2');
     const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
     const events=createArcaneEventSource(host,{source:'arcane.component.markdown-document',eventTypes:['markdown-document-state','markdown-document-empty','markdown-document-error','markdown-document-loading','markdown-document-rendered','markdown-document-navigate','markdown-document-ready']});
     const lifecycleController=new AbortController();

package/runtime/arcane/components/markdown-editor.html

@@ -75,16 +75,11 @@
 
 <script type="module">
     const host=this;
-    const componentURL=new URL(
-        host.getAttribute('href')||'./arcane/components/markdown-editor.html',
-        document.baseURI
-    );
-    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
-    const {default:MD}=await import(moduleURL('MD.js?v=2'));
+    const {default:MD}=await import('../modules/MD.js?v=2');
     const {
         applyMarkdownFormat,
         normalizeMarkdownOptions
-    }=await import(moduleURL('ComponentContracts.js'));
+    }=await import('../modules/ComponentContracts.js');
     const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');
     const events=createArcaneEventSource(host,{source:'arcane.component.markdown-editor',eventTypes:['markdown-editor-change','markdown-editor-saved','markdown-editor-ready']});
     const lifecycleController=new AbortController();

package/runtime/arcane/components/media-embed.html

@@ -1,7 +1,7 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>:host{display:block}.player-shell{display:grid;gap:var(--arcane-space-4)}.loader{display:flex;gap:var(--arcane-space-2)}.loader input{min-width:0;width:100%}.player{aspect-ratio:16/9;display:grid;place-items:center;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}iframe{width:100%;height:100%;border:0}.empty{text-align:center;color:var(--arcane-muted);padding:var(--arcane-space-5)}.footer{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between}.status{margin:0;color:var(--arcane-muted)}@media(max-width:36rem){.loader,.footer{align-items:stretch;flex-direction:column}}</style>
 <section class="player-shell"><form id="loader" class="loader"><label class="visually-hidden" for="mediaUrl">Video or playlist address</label><input id="mediaUrl" type="text" inputmode="url" autocomplete="off" spellcheck="false" placeholder="Paste a YouTube video or playlist URL"><button class="arcane-button" type="submit">Play</button></form><div class="player"><div id="empty" class="empty"><strong>Choose something to play</strong><p>Paste a YouTube or YouTube Music video or playlist address.</p></div><iframe id="frame" title="Embedded media player" hidden allow="autoplay; encrypted-media; picture-in-picture; fullscreen" allowfullscreen></iframe></div><div class="footer"><p id="status" class="status" role="status" aria-live="polite">Nothing loaded.</p><button id="platform" class="arcane-button arcane-button--secondary" type="button">Open platform</button></div></section>
-<script type="module">const host=this,root=host.shadowRoot,form=root.querySelector('#loader'),input=root.querySelector('#mediaUrl'),frame=root.querySelector('#frame'),empty=root.querySelector('#empty'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/media-embed.html',document.baseURI);const {parseYouTubeMedia,youtubeEmbedUrl}=await import(new URL('../modules/YouTubeMedia.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.media-embed',eventTypes:['media-open-platform','media-load','media-error','media-embed-ready']}),lifecycleController=new AbortController();let platformUrl='https://www.youtube.com/',privacyEnhanced=false,destroyed=false,operationSequence=0;
+<script type="module">const host=this,root=host.shadowRoot,form=root.querySelector('#loader'),input=root.querySelector('#mediaUrl'),frame=root.querySelector('#frame'),empty=root.querySelector('#empty'),status=root.querySelector('#status');const {parseYouTubeMedia,youtubeEmbedUrl}=await import('../modules/YouTubeMedia.js');const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.media-embed',eventTypes:['media-open-platform','media-load','media-error','media-embed-ready']}),lifecycleController=new AbortController();let platformUrl='https://www.youtube.com/',privacyEnhanced=false,destroyed=false,operationSequence=0;
 function nextOperationId(kind){operationSequence+=1;return `${events.descriptor.instanceId}:${kind}:${operationSequence}`}
 function emit(type,detail={},publicDetail={},operationId=null){if(destroyed)return false;const publication=events.dispatch(type,detail,{publicDetail,operationId});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
 host.configure=options=>{if(destroyed)return false;platformUrl=String(options?.platformUrl||platformUrl);if(Object.hasOwn(options||{},'privacyEnhanced'))privacyEnhanced=options.privacyEnhanced===true;if(options?.placeholder)input.placeholder=String(options.placeholder);if(options?.openLabel)root.querySelector('#platform').textContent=String(options.openLabel);if(options?.initialValue){input.value=String(options.initialValue);load(input.value)}return host};host.load=load;host.destroy=destroy;

package/runtime/arcane/components/screen-capture.html

@@ -1,7 +1,7 @@
 <link rel="stylesheet" href="./arcane/css/theme.css?v=1"><link rel="stylesheet" href="./arcane/css/primitives.css?v=1">
 <style>:host{display:block}.capture{display:grid;gap:var(--arcane-space-4)}.actions{display:grid;gap:var(--arcane-space-3);grid-template-columns:repeat(3,minmax(0,1fr))}.action{display:grid;gap:var(--arcane-space-2);padding:var(--arcane-space-4);text-align:left}.action strong{font-size:1.05rem}.action span{color:var(--arcane-muted);font-size:.85rem}.recording{align-items:center;display:flex;gap:var(--arcane-space-3);justify-content:space-between;padding:var(--arcane-space-3);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-medium)}.preview{display:grid;place-items:center;min-height:16rem;overflow:auto;background:var(--arcane-surface-muted);border:1px solid var(--arcane-border);border-radius:var(--arcane-radius-large)}.preview :where(img,video){display:block}.empty{color:var(--arcane-muted);text-align:center}.status{margin:0;color:var(--arcane-muted)}@media(max-width:44rem){.actions{grid-template-columns:1fr}}</style>
 <section class="capture"><div class="actions"><button class="action arcane-card" type="button" data-capture="image"><strong>Screenshot</strong><span>Capture the selected display as PNG.</span></button><button class="action arcane-card" type="button" data-capture="video"><strong>Record video</strong><span>Record the selected display in a browser-supported video format.</span></button><button class="action arcane-card" type="button" data-capture="gif"><strong>Record GIF</strong><span>Record the selected display as an animated GIF.</span></button></div><div id="recording" class="recording" hidden><span id="recordingLabel">Recording…</span><button id="stop" class="arcane-button" type="button">Stop recording</button></div><div id="preview" class="preview"><div class="empty"><strong>No capture yet</strong><p>Your capture remains on this device unless you choose to save it.</p></div></div><p id="status" class="status" role="status" aria-live="polite">Choose a capture type. Your browser will ask which display to share.</p></section>
-<script type="module">const host=this,root=host.shadowRoot,preview=root.querySelector('#preview'),recording=root.querySelector('#recording'),status=root.querySelector('#status');const componentURL=new URL(host.getAttribute('href')||'./arcane/components/screen-capture.html',document.baseURI);const {default:ScreenCapture}=await import(new URL('../modules/ScreenCapture.js',componentURL));const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.screen-capture',eventTypes:['screen-capture-result','screen-capture-ready']});const capture=new ScreenCapture(),listeners=new AbortController();let destroyed=false,operationGeneration=0,previewUrl='';
+<script type="module">const host=this,root=host.shadowRoot,preview=root.querySelector('#preview'),recording=root.querySelector('#recording'),status=root.querySelector('#status');const {default:ScreenCapture}=await import('../modules/ScreenCapture.js');const {createArcaneEventSource,projectArcaneDOMEvent}=await import('arcane-os/event-manager');const events=createArcaneEventSource(host,{source:'arcane.component.screen-capture',eventTypes:['screen-capture-result','screen-capture-ready']});const capture=new ScreenCapture(),listeners=new AbortController();let destroyed=false,operationGeneration=0,previewUrl='';
 function emit(type,detail={},publicDetail={},operationId=null){if(destroyed)return false;const publication=events.dispatch(type,detail,{operationId,publicDetail});return projectArcaneDOMEvent(host,publication.occurrence,{bubbles:true,composed:true})}
 function current(generation){return !destroyed&&generation===operationGeneration}
 function cleanupCaptureStart(originalError=null){const cleanupErrors=[];if(capture.recorder&&capture.recorder.state!=='inactive'){try{capture.recorder.stop()}catch(error){cleanupErrors.push(error)}}try{capture.stopTracks(capture.stream)}catch(error){cleanupErrors.push(error)}try{capture.reset()}catch(error){cleanupErrors.push(error)}for(const error of cleanupErrors)console.error('Error cleaning up rejected screen capture start:',error);return originalError}

package/runtime/arcane/components/voice-transcription.html

@@ -84,21 +84,16 @@
             ]
         }
     );
-    const componentURL=new URL(
-        host.getAttribute('href')||'./arcane/components/voice-transcription.html',
-        document.baseURI
-    );
-    const moduleURL=name=>new URL(`../modules/${name}`,componentURL).href;
-    const {default:MD}=await import(moduleURL('MD.js?v=2'));
+    const {default:MD}=await import('../modules/MD.js?v=2');
     const {
         appendTranscription,
         createSTTActivationController,
         normalizeVoiceOptions
-    }=await import(moduleURL('ComponentContracts.js'));
+    }=await import('../modules/ComponentContracts.js');
     const {
         requestAIRuntimeIntent,
         subscribeAIRuntimeState
-    }=await import(moduleURL('AIRuntimeState.js'));
+    }=await import('../modules/AIRuntimeState.js');
     const description=host.shadowRoot.querySelector('#description');
     const transcriptElement=host.shadowRoot.querySelector('#transcript');
     const status=host.shadowRoot.querySelector('#status');
@@ -598,7 +593,7 @@
             return options.transcribe(file,context);
         }
         if(typeof globalThis.ai?.fetchSTT!=='function'){
-            await import(moduleURL('AI.js'));
+            await import('../modules/AI.js');
         }
         if(typeof globalThis.ai?.fetchSTT!=='function'){
             const error=new Error('Speech transcription is not configured.');

package/runtime/arcane/modules/HTMLImport.js

@@ -12,6 +12,44 @@ globalThis[htmlImportHostRegistryKey]=htmlImportHostRegistry;
 
 let htmlImportScriptId=0;
 
+const htmlImportModuleURL=new URL(import.meta.url);
+const htmlImportAssetVersion=htmlImportModuleURL.searchParams.get('arcaneVersion');
+
+function versionComponentResource(value,baseHref){
+  if(!htmlImportAssetVersion||typeof value!=='string'||!value||value.startsWith('#')){
+    return value;
+  }
+  let resolvedURL;
+  try{
+    resolvedURL=new URL(value,baseHref);
+  }catch{
+    return value;
+  }
+  if(resolvedURL.protocol!==htmlImportModuleURL.protocol
+    ||resolvedURL.origin!==htmlImportModuleURL.origin){
+    return value;
+  }
+
+  const fragmentIndex=value.indexOf('#');
+  const fragment=fragmentIndex<0?'':value.slice(fragmentIndex);
+  const resource=fragmentIndex<0?value:value.slice(0,fragmentIndex);
+  const queryIndex=resource.indexOf('?');
+  const pathname=queryIndex<0?resource:resource.slice(0,queryIndex);
+  const query=queryIndex<0?'':resource.slice(queryIndex+1);
+  const versionField=`arcaneVersion=${encodeURIComponent(htmlImportAssetVersion)}`;
+  let replaced=false;
+  const fields=query?query.split('&').map(function versionQueryField(field){
+    if(!new URLSearchParams(field).has('arcaneVersion'))return field;
+    if(replaced)return null;
+    replaced=true;
+    return versionField;
+  }).filter(function retainQueryField(field){
+    return field!==null;
+  }):[];
+  if(!replaced)fields.push(versionField);
+  return `${pathname}?${fields.join('&')}${fragment}`;
+}
+
 function componentRuntimeRoot(resolvedHref){
   const componentURL=new URL(resolvedHref);
   const componentMarker='/arcane/components/';
@@ -32,28 +70,157 @@ function resolveComponentResource(value,runtimeRoot){
 }
 
 function resolveComponentStyleResources(styleText,runtimeRoot){
-  if(!runtimeRoot)return styleText;
-  return styleText.replace(
-    /url\(\s*(['"]?)\.\/arcane\/([^)'"\s]+)\1\s*\)/gu,
-    function resolveStyleURL(_match,quote,resourcePath){
-      const resolved=new URL(resourcePath,runtimeRoot).href;
-      return `url(${quote}${resolved}${quote})`;
+  if(!runtimeRoot&&!htmlImportAssetVersion)return styleText;
+  const parts=[];
+  let copiedThrough=0;
+  let index=0;
+
+  function afterComment(start){
+    const end=styleText.indexOf('*/',start+2);
+    return end<0?styleText.length:end+2;
+  }
+
+  function afterEscape(start){
+    let end=start+1;
+    if(/[\da-f]/iu.test(styleText[end]||'')){
+      const limit=end+6;
+      while(end<limit&&/[\da-f]/iu.test(styleText[end]||''))end+=1;
+      if(/[\t\n\f\r ]/u.test(styleText[end]||'')){
+        end+=styleText[end]==='\r'&&styleText[end+1]==='\n'?2:1;
+      }
+      return end;
     }
-  );
+    return end+(styleText[end]==='\r'&&styleText[end+1]==='\n'?2:1);
+  }
+
+  function afterString(start){
+    const quote=styleText[start];
+    let end=start+1;
+    while(end<styleText.length){
+      if(styleText[end]==='\\'){
+        end=afterEscape(end);
+      }else if(styleText[end]===quote){
+        return end+1;
+      }else if(/[\n\r\f]/u.test(styleText[end])){
+        return end;
+      }else{
+        end+=1;
+      }
+    }
+    return styleText.length;
+  }
+
+  function afterWhitespaceAndComments(start){
+    let end=start;
+    while(end<styleText.length){
+      if(/[\t\n\f\r ]/u.test(styleText[end])){
+        end+=1;
+      }else if(styleText.startsWith('/*',end)){
+        end=afterComment(end);
+      }else{
+        break;
+      }
+    }
+    return end;
+  }
+
+  function appendResource(start,end){
+    const resourcePath=styleText.slice(start,end);
+    // CSS escapes retain their original spelling until their URL syntax is decoded.
+    if(resourcePath.includes('\\'))return;
+    const resolved=versionComponentResource(
+      resolveComponentResource(resourcePath,runtimeRoot),
+      document.baseURI
+    );
+    if(resolved===resourcePath)return;
+    parts.push(styleText.slice(copiedThrough,start),resolved);
+    copiedThrough=end;
+  }
+
+  while(index<styleText.length){
+    if(styleText.startsWith('/*',index)){
+      index=afterComment(index);
+      continue;
+    }
+    if(styleText[index]==='"'||styleText[index]==="'"){
+      index=afterString(index);
+      continue;
+    }
+
+    const atRule=styleText[index]==='@';
+    const hashToken=styleText[index]==='#';
+    const nameStart=atRule||hashToken?index+1:index;
+    let nameEnd=nameStart;
+    while(nameEnd<styleText.length&&/[-\w\u0080-\uFFFF\\]/u.test(styleText[nameEnd])){
+      nameEnd=styleText[nameEnd]==='\\'?afterEscape(nameEnd):nameEnd+1;
+    }
+    if(nameEnd===nameStart){
+      index+=1;
+      continue;
+    }
+    const name=styleText.slice(nameStart,nameEnd).toLowerCase();
+    index=nameEnd;
+    if(hashToken)continue;
+    if(atRule&&name==='import'){
+      const start=afterWhitespaceAndComments(nameEnd);
+      if(styleText[start]==='"'||styleText[start]==="'"){
+        const end=afterString(start);
+        if(styleText[end-1]===styleText[start])appendResource(start+1,end-1);
+        index=end;
+      }
+      continue;
+    }
+    if(atRule||name!=='url'||styleText[nameEnd]!=='(')continue;
+
+    let start=nameEnd+1;
+    while(start<styleText.length&&/[\t\n\f\r ]/u.test(styleText[start]))start+=1;
+    if(styleText[start]==='"'||styleText[start]==="'"){
+      const end=afterString(start);
+      const close=afterWhitespaceAndComments(end);
+      if(styleText[end-1]===styleText[start]&&styleText[close]===')'){
+        appendResource(start+1,end-1);
+        index=close+1;
+      }else{
+        index=end;
+      }
+      continue;
+    }
+
+    let end=start;
+    while(end<styleText.length&&!/[\t\n\f\r )'"(]/u.test(styleText[end])){
+      end=styleText[end]==='\\'?afterEscape(end):end+1;
+    }
+    let close=end;
+    while(close<styleText.length&&/[\t\n\f\r ]/u.test(styleText[close]))close+=1;
+    if(styleText[close]===')'){
+      appendResource(start,end);
+      index=close+1;
+    }else{
+      index=end;
+    }
+  }
+  if(parts.length===0)return styleText;
+  parts.push(styleText.slice(copiedThrough));
+  return parts.join('');
 }
 
 function createComponentFragment(html,resolvedHref){
   const template=document.createElement('template');
   template.innerHTML=html;
   const runtimeRoot=componentRuntimeRoot(resolvedHref);
-  if(!runtimeRoot)return template.content;
 
   for(const element of template.content.querySelectorAll('[href],[src]')){
     for(const attribute of ['href','src']){
       if(!element.hasAttribute(attribute))continue;
       const value=element.getAttribute(attribute);
       const resolved=resolveComponentResource(value,runtimeRoot);
-      if(resolved!==value)element.setAttribute(attribute,resolved);
+      const navigation=attribute==='href'
+        &&['a','area','base'].includes(element.localName);
+      const versioned=navigation?resolved:versionComponentResource(
+        resolved,
+        element.localName==='script'?resolvedHref:document.baseURI
+      );
+      if(versioned!==value)element.setAttribute(attribute,versioned);
     }
   }
   for(const style of template.content.querySelectorAll('style')){
@@ -69,7 +236,8 @@ function resolveRelativeDynamicImports(source,baseHref){
   return source.replace(
     /\bimport\s*\(\s*(['"])(\.{1,2}\/[^'"]+)\1\s*\)/gu,
     function resolveDynamicImport(_match,_quote,specifier){
-      return `import(${JSON.stringify(new URL(specifier,baseHref).href)})`;
+      const resolved=versionComponentResource(new URL(specifier,baseHref).href,baseHref);
+      return `import(${JSON.stringify(resolved)})`;
     }
   );
 }
@@ -138,8 +306,8 @@ class HTMLImport extends HTMLElement {
 
     try{
       const resolvedURL=new URL(href,document.baseURI);
-      resolvedHref=resolvedURL.href;
-      const response=await fetch(resolvedURL.href,{
+      resolvedHref=versionComponentResource(resolvedURL.href,document.baseURI);
+      const response=await fetch(resolvedHref,{
         cache:'default',
         method:'GET',
         signal:controller.signal
@@ -308,7 +476,10 @@ class HTMLImport extends HTMLElement {
         let sourceBaseHref=contentBaseHref;
         const scriptSource=script.getAttribute('src');
         if(scriptSource!==null){
-          const requestedScriptHref=new URL(scriptSource,contentBaseHref).href;
+          const requestedScriptHref=versionComponentResource(
+            new URL(scriptSource,contentBaseHref).href,
+            contentBaseHref
+          );
           const response=await fetch(requestedScriptHref,{
             cache:'default',
             method:'GET',