ontologyviewer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ontology Viewer contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.ja.md

@@ -0,0 +1,166 @@
+# ontologyviewer
+
+[English](README.md) · [API](docs/API.md) · [npm公開手順](docs/PUBLISHING.md)
+
+Webページ内のTurtleを、読み取り専用の **Schema** 図と **Triples** グラフとして表示する独立ライブラリです。Cytoscapeを同梱し、サーバー、アカウント、テレメトリ、外部Ontology取得を必要としません。
+
+## クイックスタート
+
+```html
+<script type="text/turtle" class="ontologyviewer">
+@prefix : <https://example.org/harbor#> .
+@prefix owl: <http://www.w3.org/2002/07/owl#> .
+@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
+
+:Vendor a owl:Class ; rdfs:label "Vendor" .
+:Stall a owl:Class ; rdfs:label "Stall" .
+:operates a owl:ObjectProperty ;
+  rdfs:label "operates" ; rdfs:domain :Vendor ; rdfs:range :Stall .
+</script>
+
+<script type="module">
+  import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.0/dist/ontologyviewer.esm.min.mjs";
+  ontologyviewer.initialize({ startOnLoad: true });
+</script>
+```
+
+実行されない `text/turtle` の `<script>` はDOM内に保持され、Viewer稼働中は非表示です。この形式ならTurtleの `<...>` IRIをHTML entityへ変換せず、そのまま記述できます。ただし、Turtle内にリテラルな `</script>` があるとHTMLがsource要素の終了タグとして扱うため避けてください。従来の `<pre class="ontologyviewer">` も利用できますが、HTMLソース内の `<` は `&lt;` と書く必要があります。`destroy()` はどちらのsource要素も元の状態へ戻します。
+
+`examples/` のHTMLをFinderなどから直接開かないでください。ブラウザのES Moduleは `file:` URLでCORSブロックされます。`webplugin/` で `npm run examples` を実行し、`http://127.0.0.1:4173/examples/index.html` を開いてください。直開きや `dist/` 未生成時には、example画面に起動手順が表示されます。
+
+再現性を重視するページでは完全なバージョン（`@0.1.0`）を固定してください。`@10` のようなmajor指定は互換更新に追従できますが、配信内容は将来変化します。
+
+## npmから利用
+
+```bash
+npm install --save-exact ontologyviewer@0.1.0
+```
+
+```ts
+import ontologyviewer from "ontologyviewer";
+
+const manager = ontologyviewer.initialize({
+  startOnLoad: true,
+  theme: "auto",
+  locale: "auto",
+});
+await manager.ready;
+```
+
+## 機能
+
+- datatype property、アイコン、色指定、cardinality、推論関係、統計、凡例、読み取り専用Inspectorを備えたSchemaカード。
+- Triples表示、検索、近傍focus、pan、zoom、fit、fCoSE/Dagre、node移動、PNG出力。
+- 1ページ内の複数Viewerを完全に分離。
+- 英語・日本語UIとlight/darkテーマの自動追従。
+- `storageKey` を指定した場合だけ、有効値を検査してレイアウトを `localStorage` に保存。
+- Turtleエラーを行・列付きで安全に表示し、`update()` で復旧可能。
+- 通常はCSSを自動注入し、制限の強いCSP向けには外部CSSモードを提供。
+- 編集機能、ネットワーク通信、telemetry、cookie、アカウントはありません。
+
+## HTML属性
+
+```html
+<script
+  type="text/turtle"
+  class="ontologyviewer"
+  data-height="600px"
+  data-theme="dark"
+  data-locale="ja"
+  data-layout="dagre"
+  data-default-view="schema"
+  data-base-iri="https://example.org/base/"
+  data-storage-key="harbor-market"
+>...</script>
+```
+
+API optionは `data-*` より優先されます。高さには数値付きの `px`、`rem`、`em`、`vh`、`vw`、`%` を指定できます。不正値は安全に `600px` へ戻します。
+
+## プログラムAPI
+
+```ts
+const source = document.querySelector<HTMLElement>("#ontology")!;
+const instance = ontologyviewer.render(source, {
+  baseIri: "https://example.org/base/",
+  defaultView: "schema",
+  layout: "fcose",
+  storageKey: "example-layout", // 省略すると保存しない
+  onError(error) {
+    console.error(error.line, error.column, error.message);
+  },
+});
+
+await instance.update(nextTurtle);
+instance.fit();
+instance.runLayout("dagre");
+const png: Blob = await instance.exportPng();
+instance.destroy();
+```
+
+`initialize()` は `MutationObserver` を登録しません。後から追加した要素は `manager.scan(container)` または `render(element)` で明示的に初期化してください。
+
+完全な型とライフサイクルは [API.md](docs/API.md) を参照してください。
+
+## 厳格なCSPと外部CSS
+
+inline `<style>` が許可されない場合は自動注入を止め、CSSを明示的に読み込みます。
+
+```html
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.0/dist/ontologyviewer.css"
+      data-ontologyviewer-styles>
+<script type="module" src="/assets/start-ontologyviewer.mjs"></script>
+```
+
+```js
+import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.0/dist/ontologyviewer.esm.min.mjs";
+ontologyviewer.initialize({ startOnLoad: true, injectStyles: false });
+```
+
+Cytoscapeはcanvas配置にstyle属性を使用するため、style要素は外部化したままstyle属性のみ許可します。
+
+```http
+Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; img-src data: blob:
+```
+
+外部CSSモードの既定高さは600pxです。このモードで高さを変更する場合は、信頼できるサイト側CSSで `.ontologyviewer-root` を指定してください。
+
+## ベースIRI
+
+相対IRIは次の順で解決します。
+
+1. `options.baseIri`（非推奨alias `baseIRI` も利用可能）
+2. `data-base-iri`
+3. Turtle内の `@base`
+4. `document.baseURI`
+
+0.1.xが直接解析する形式はTurtleだけです。RDF/XML、JSON-LD、TriG、N-Triples、Notation3は自動判定しません。
+
+## 対応ブラウザ
+
+ESM bundleはES2020をtargetとし、CIでPlaywright Chromium、Firefox、WebKitを実行します。Chrome/Edge、Firefox、Safariの最新2安定版をsupport対象とします。
+
+## 開発・公開
+
+`webplugin/` は自己完結しています。内容を新しいrepositoryのrootへコピーしても、次の手順で検証できます。
+
+```bash
+npm ci
+npx playwright install chromium firefox webkit
+npm run verify
+npm run test:e2e
+npm pack
+```
+
+- [導入](docs/GETTING_STARTED.md)
+- [API](docs/API.md)
+- [カスタマイズとCSP](docs/CUSTOMIZATION.md)
+- [トラブルシューティング](docs/TROUBLESHOOTING.md)
+- [開発](docs/DEVELOPMENT.md)
+- [npm/jsDelivr公開](docs/PUBLISHING.md)
+- [Security](docs/SECURITY.md) · [Privacy](docs/PRIVACY.md)
+- [Contribution](CONTRIBUTING.md) · [変更履歴](CHANGELOG.md)
+
+## ライセンス
+
+MITです。同梱依存のnoticeは [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md) にあります。

package/README.md

@@ -0,0 +1,169 @@
+# ontologyviewer
+
+[日本語](README.ja.md) · [API](docs/API.md) · [Publishing](docs/PUBLISHING.md)
+
+A standalone, read-only Turtle ontology viewer for web pages. It renders class-focused **Schema** diagrams and raw **Triples** graphs with Cytoscape, without a server, account, telemetry, or ontology network requests.
+
+## Quick start
+
+```html
+<script type="text/turtle" class="ontologyviewer">
+@prefix : <https://example.org/harbor#> .
+@prefix owl: <http://www.w3.org/2002/07/owl#> .
+@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
+
+:Vendor a owl:Class ; rdfs:label "Vendor" .
+:Stall a owl:Class ; rdfs:label "Stall" .
+:operates a owl:ObjectProperty ;
+  rdfs:label "operates" ; rdfs:domain :Vendor ; rdfs:range :Stall .
+</script>
+
+<script type="module">
+  import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.0/dist/ontologyviewer.esm.min.mjs";
+  ontologyviewer.initialize({ startOnLoad: true });
+</script>
+```
+
+The inert `text/turtle` script is retained in the DOM and hidden while its viewer is active. It accepts ordinary Turtle `<...>` IRIs without HTML entity escaping. Avoid a literal `</script>` sequence in that Turtle because HTML treats it as the closing tag. A `<pre class="ontologyviewer">` remains supported, but literal HTML source must write `<` as `&lt;`; `destroy()` restores either source element.
+
+Do not double-click the files under `examples/`: browser ES Modules are commonly blocked on `file:` URLs. From `webplugin/`, run `npm run examples` and open `http://127.0.0.1:4173/examples/index.html`. The example page now keeps an actionable message visible when it is opened incorrectly or when `dist/` has not been built.
+
+For reproducible pages, pin a complete version (`@0.1.0`). A major selector such as `@10` follows compatible releases but can change the delivered bytes.
+
+## Install from npm
+
+```bash
+npm install --save-exact ontologyviewer@0.1.0
+```
+
+```ts
+import ontologyviewer, { render, getInstance } from "ontologyviewer";
+
+const manager = ontologyviewer.initialize({
+  startOnLoad: true,
+  theme: "auto",
+  locale: "auto",
+});
+await manager.ready;
+```
+
+## Features
+
+- Schema cards with datatype properties, icons, color hints, cardinality, inferred-relation styling, statistics, legend, and read-only Inspector.
+- Raw Triples view, search, neighborhood focus, pan, zoom, fit, fCoSE/Dagre layouts, node dragging, and PNG export.
+- Multiple isolated viewers in one document.
+- English and Japanese UI; automatic light/dark theme tracking.
+- Optional, validated `localStorage` layout persistence.
+- Safe parse failures with line/column information and recovery through `update()`.
+- One-import CSS injection, plus an external-CSS mode for restrictive CSPs.
+- No editor controls, remote imports, fetch/XHR, telemetry, cookies, or accounts.
+
+## HTML configuration
+
+```html
+<script
+  type="text/turtle"
+  class="ontologyviewer"
+  data-height="600px"
+  data-theme="dark"
+  data-locale="ja"
+  data-layout="dagre"
+  data-default-view="schema"
+  data-base-iri="https://example.org/base/"
+  data-storage-key="harbor-market"
+>...</script>
+```
+
+API options take precedence over `data-*` values. Accepted heights are numeric `px`, `rem`, `em`, `vh`, `vw`, or `%` lengths. Invalid values fall back safely to `600px`.
+
+## Programmatic API
+
+```ts
+const source = document.querySelector<HTMLElement>("#ontology")!;
+const instance = ontologyviewer.render(source, {
+  baseIri: "https://example.org/base/",
+  defaultView: "schema",
+  layout: "fcose",
+  storageKey: "example-layout", // omit to disable persistence
+  onError(error) {
+    console.error(error.line, error.column, error.message);
+  },
+});
+
+await instance.update(nextTurtle);
+instance.fit();
+instance.runLayout("dagre");
+const png: Blob = await instance.exportPng();
+instance.destroy();
+
+ontologyviewer.getInstance(source); // undefined after destroy()
+```
+
+`initialize()` does not install a `MutationObserver`. For dynamically inserted source elements, call `manager.scan(container)` or `render(element)` explicitly.
+
+See [API.md](docs/API.md) for the complete contracts and lifecycle states.
+
+## Strict CSP / external CSS
+
+Automatic style injection is convenient but requires an inline `<style>`. Disable it and load the published stylesheet when your policy does not allow inline style elements:
+
+```html
+<link rel="stylesheet"
+      href="https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.0/dist/ontologyviewer.css"
+      data-ontologyviewer-styles>
+<script type="module" src="/assets/start-ontologyviewer.mjs"></script>
+```
+
+```js
+// /assets/start-ontologyviewer.mjs
+import ontologyviewer from "https://cdn.jsdelivr.net/npm/ontologyviewer@0.1.0/dist/ontologyviewer.esm.min.mjs";
+ontologyviewer.initialize({ startOnLoad: true, injectStyles: false });
+```
+
+Cytoscape positions its canvases with style attributes, so a compatible strict policy permits style attributes while keeping style elements external, for example:
+
+```http
+Content-Security-Policy: default-src 'none'; script-src 'self' https://cdn.jsdelivr.net; style-src 'self' https://cdn.jsdelivr.net; style-src-attr 'unsafe-inline'; img-src data: blob:
+```
+
+In external-CSS mode the stylesheet's default height is 600px. Set a different height in trusted site CSS rather than `data-height`, because the library deliberately avoids setting a style attribute in this mode.
+
+## Base IRI resolution
+
+The parser resolves relative IRIs using:
+
+1. `options.baseIri` (the deprecated `baseIRI` alias is also accepted)
+2. `data-base-iri`
+3. a Turtle `@base` directive, interpreted by N3
+4. `document.baseURI`
+
+Only Turtle is accepted in version 0.1.x. RDF/XML, JSON-LD, TriG, N-Triples, and Notation3 are not auto-detected.
+
+## Browser support
+
+The ESM bundle targets ES2020 and is tested in CI with current Playwright Chromium, Firefox, and WebKit. The support policy is the latest two stable releases of Chrome/Edge, Firefox, and Safari.
+
+## Development and publishing
+
+`webplugin/` is self-contained. Copy its contents to a repository root without the parent VS Code extension and run:
+
+```bash
+npm ci
+npx playwright install chromium firefox webkit
+npm run verify
+npm run test:e2e
+npm pack
+```
+
+- [Getting started](docs/GETTING_STARTED.md)
+- [API reference](docs/API.md)
+- [Customization and CSP](docs/CUSTOMIZATION.md)
+- [Troubleshooting](docs/TROUBLESHOOTING.md)
+- [Development](docs/DEVELOPMENT.md)
+- [Publishing to npm/jsDelivr](docs/PUBLISHING.md)
+- [Security](docs/SECURITY.md) · [Privacy](docs/PRIVACY.md)
+- [Contributing](CONTRIBUTING.md) · [Changelog](CHANGELOG.md)
+
+## License
+
+MIT. Bundled dependency notices are in [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).

package/THIRD_PARTY_NOTICES.md

@@ -0,0 +1,49 @@
+# Third-Party Notices — ontologyviewer
+
+This file lists the third-party dependencies bundled with ontologyviewer and their respective licenses.
+
+---
+
+## Cytoscape.js
+
+- **Version:** 3.30.4
+- **License:** MIT
+- **Homepage:** https://js.cytoscape.org/
+- **Repository:** https://github.com/cytoscape/cytoscape.js
+
+Copyright (c) The Cytoscape Consortium
+
+---
+
+## cytoscape-dagre
+
+- **Version:** 2.5.0
+- **License:** MIT
+- **Homepage:** https://github.com/cytoscape/cytoscape.js-dagre
+- **Repository:** https://github.com/cytoscape/cytoscape.js-dagre
+
+---
+
+## cytoscape-fcose
+
+- **Version:** 2.2.0
+- **License:** MIT
+- **Homepage:** https://github.com/iVis-at-Bilkent/cytoscape.js-fcose
+- **Repository:** https://github.com/iVis-at-Bilkent/cytoscape.js-fcose
+
+Copyright (c) iVis-at-Bilkent
+
+---
+
+## N3.js
+
+- **Version:** 1.22.3
+- **License:** MIT
+- **Homepage:** https://github.com/rdfjs/N3.js
+- **Repository:** https://github.com/rdfjs/N3.js
+
+Copyright (c) Ruben Verborgh
+
+---
+
+All bundled dependencies are licensed under the MIT License, which is compatible with ontologyviewer's MIT License.

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import type { InitializeOptions, OntologyViewerInstance, OntologyViewerManager, OntologyViewerOptions } from "./types";
+export type { InitializeOptions, LayoutName, OntologyViewerError, OntologyViewerInstance, OntologyViewerManager, OntologyViewerOptions, ViewerStatus, ViewMode, } from "./types";
+export type { Locale } from "./locale";
+export type { Theme } from "./theme";
+export declare function render(element: HTMLElement, options?: OntologyViewerOptions): OntologyViewerInstance;
+export declare function initialize(options?: InitializeOptions): OntologyViewerManager;
+export declare function getInstance(element: HTMLElement): OntologyViewerInstance | undefined;
+declare const ontologyviewer: {
+    initialize: typeof initialize;
+    render: typeof render;
+    getInstance: typeof getInstance;
+};
+export default ontologyviewer;
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EACV,iBAAiB,EAEjB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EAEtB,MAAM,SAAS,CAAC;AAIjB,YAAY,EACV,iBAAiB,EACjB,UAAU,EACV,mBAAmB,EACnB,sBAAsB,EACtB,qBAAqB,EACrB,qBAAqB,EACrB,YAAY,EACZ,QAAQ,GACT,MAAM,SAAS,CAAC;AACjB,YAAY,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACvC,YAAY,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AASrC,wBAAgB,MAAM,CAAC,OAAO,EAAE,WAAW,EAAE,OAAO,GAAE,qBAA0B,GAAG,sBAAsB,CAgCxG;AAED,wBAAgB,UAAU,CAAC,OAAO,GAAE,iBAAsB,GAAG,qBAAqB,CA+BjF;AAED,wBAAgB,WAAW,CAAC,OAAO,EAAE,WAAW,GAAG,sBAAsB,GAAG,SAAS,CAGpF;AA2ED,QAAA,MAAM,cAAc;;;;CAAsC,CAAC;AAC3D,eAAe,cAAc,CAAC"}

package/dist/locale.d.ts

@@ -0,0 +1,34 @@
+export type Locale = "auto" | "en" | "ja";
+export interface Messages {
+    schemaView: string;
+    triplesView: string;
+    searchPlaceholder: string;
+    noResults: string;
+    properties: string;
+    instances: string;
+    relations: string;
+    entities: string;
+    triples: string;
+    legend: string;
+    inspector: string;
+    statistics: string;
+    zoomIn: string;
+    zoomOut: string;
+    resetZoom: string;
+    fitToScreen: string;
+    exportPng: string;
+    layout: string;
+    close: string;
+    parseError: string;
+    emptyOntology: string;
+    description: string;
+    type: string;
+    domain: string;
+    range: string;
+    colorGroup: string;
+    declared: string;
+    inferred: string;
+}
+export declare function resolveLocale(locale: Locale): "en" | "ja";
+export declare function getMessages(locale: Locale): Messages;
+//# sourceMappingURL=locale.d.ts.map

package/dist/locale.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"locale.d.ts","sourceRoot":"","sources":["../src/locale.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;AAE1C,MAAM,WAAW,QAAQ;IACvB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,CAAC;IAChB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,WAAW,EAAE,MAAM,CAAC;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CAClB;AAgED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAOzD;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,QAAQ,CAEpD"}