@adecore/ui 0.16.0-beta.0 → 0.17.0-beta.1

package/dist/file-tree/use-slots.js

@@ -0,0 +1,171 @@
+import { useEffect, useId, useState } from 'react';
+import { pathOfRow, visibleRows } from './helpers.js';
+import { FILE_TREE_CSS } from './style.js';
+// beta.6 owns button rows. Sibling slots keep real controls outside those buttons and in the app's stylesheet.
+export function useFileTreeSlots(model, frame, label) {
+    const prefix = useId().replaceAll(':', '');
+    const [slots, setSlots] = useState([]);
+    useEffect(() => {
+        if (frame === null) {
+            return;
+        }
+        const ports = new Map();
+        let shadow = null;
+        let style = null;
+        let serial = 0;
+        let disposed = false;
+        let pending = false;
+        let snapshot = null;
+        const position = () => {
+            for (const port of ports.values()) {
+                const row = port.rowElement;
+                const content = row.querySelector('[data-item-section="content"]');
+                const icon = row.querySelector('[data-item-section="icon"]');
+                const control = port.lightControl;
+                const decoration = port.lightDecoration;
+                const controlSpace = control.childNodes.length > 0 ? Math.ceil(control.getBoundingClientRect().width) + 6 : 0;
+                const decorationSpace = decoration.childNodes.length > 0 ? Math.ceil(decoration.getBoundingClientRect().width) + 6 : 0;
+                row.style.setProperty('--adecore-tree-control-space', `${controlSpace}px`);
+                row.style.setProperty('--adecore-tree-decoration-space', `${decorationSpace}px`);
+                port.control.style.top = `${row.offsetTop}px`;
+                port.control.style.left = `${row.offsetLeft + (icon?.offsetLeft ?? 4) - controlSpace}px`;
+                port.decoration.style.top = `${row.offsetTop}px`;
+                port.decoration.style.left = `${row.offsetLeft + (content === null ? row.offsetWidth - decorationSpace - 2 : content.offsetLeft + content.offsetWidth + 6)}px`;
+            }
+        };
+        const resize = new ResizeObserver(position);
+        const scan = () => {
+            pending = false;
+            if (disposed) {
+                return;
+            }
+            const current = model.getFileTreeContainer();
+            if (!current?.shadowRoot) {
+                return;
+            }
+            if (shadow !== current.shadowRoot) {
+                shadow = current.shadowRoot;
+                style = document.createElement('style');
+                style.dataset.adecoreTreeStyle = 'true';
+                style.textContent = FILE_TREE_CSS;
+                shadow.append(style);
+                changes.observe(shadow, {
+                    childList: true,
+                    subtree: true,
+                    attributes: true,
+                    attributeFilter: ['data-item-path', 'aria-selected', 'aria-expanded']
+                });
+                changes.observe(current, { childList: true, subtree: true });
+                resize.observe(current);
+            }
+            shadow.querySelector('[role="tree"]')?.setAttribute('aria-label', label);
+            const rows = visibleRows(model);
+            const byPath = new Map(rows.map((row) => [pathOfRow(row), row]));
+            const elements = [
+                ...shadow.querySelectorAll('[data-type="item"]:not([data-item-parked="true"]):not([data-file-tree-sticky-row="true"])')
+            ];
+            const live = new Set(elements);
+            for (const [element, port] of ports) {
+                if (!live.has(element)) {
+                    port.control.remove();
+                    port.decoration.remove();
+                    resize.unobserve(port.lightControl);
+                    resize.unobserve(port.lightDecoration);
+                    port.lightControl.remove();
+                    port.lightDecoration.remove();
+                    ports.delete(element);
+                }
+            }
+            const next = [];
+            for (const element of elements) {
+                const path = element.dataset.itemPath;
+                const row = path === undefined ? undefined : byPath.get(path);
+                if (row === undefined) {
+                    continue;
+                }
+                element.dataset.interactive = 'true';
+                element.dataset.joinedStart = String(row.isSelected && rows[row.index - 1]?.isSelected === true);
+                element.dataset.joinedEnd = String(row.isSelected && rows[row.index + 1]?.isSelected === true);
+                let port = ports.get(element);
+                if (port === undefined) {
+                    const makePort = (kind) => {
+                        const container = document.createElement('span');
+                        container.dataset.treePort = kind;
+                        const slot = document.createElement('slot');
+                        slot.name = `${prefix}-${kind}-${serial}`;
+                        container.append(slot);
+                        element.parentElement?.append(container);
+                        const target = document.createElement('span');
+                        target.slot = slot.name;
+                        target.dataset.treeSlot = kind;
+                        target.className = kind === 'control' ? 'adecore-tree-control' : 'adecore-tree-decoration';
+                        // React delegates to this portal target before the event reaches the engine's shadow tree.
+                        for (const type of ['click', 'dblclick', 'keydown', 'keyup', 'pointerdown', 'dragstart']) {
+                            target.addEventListener(type, (event) => event.stopPropagation());
+                        }
+                        current.append(target);
+                        resize.observe(target);
+                        return { container, target };
+                    };
+                    serial++;
+                    const control = makePort('control');
+                    const decoration = makePort('decoration');
+                    port = {
+                        rowElement: element,
+                        control: control.container,
+                        decoration: decoration.container,
+                        lightControl: control.target,
+                        lightDecoration: decoration.target
+                    };
+                    ports.set(element, port);
+                }
+                if (port.control.dataset.itemPath !== row.path) {
+                    port.control.dataset.itemPath = row.path;
+                }
+                if (port.decoration.dataset.itemPath !== row.path) {
+                    port.decoration.dataset.itemPath = row.path;
+                }
+                port.lightControl.dataset.itemPath = row.path;
+                port.lightDecoration.dataset.itemPath = row.path;
+                next.push({ row, control: port.lightControl, decoration: port.lightDecoration });
+            }
+            const key = next
+                .map(({ row, control }) => `${control.slot}:${row.path}:${row.isSelected}:${row.isExpanded}:${row.isFocused}:${row.name}`)
+                .join('|');
+            if (snapshot !== key) {
+                snapshot = key;
+                setSlots(next);
+            }
+            position();
+        };
+        const schedule = () => {
+            if (!pending && !disposed) {
+                pending = true;
+                queueMicrotask(scan);
+            }
+        };
+        const shifts = new MutationObserver(position);
+        shifts.observe(frame, { attributes: true, attributeFilter: ['style'] });
+        const changes = new MutationObserver(schedule);
+        changes.observe(frame, { childList: true, subtree: true });
+        const unsubscribe = model.subscribe(schedule);
+        schedule();
+        return () => {
+            disposed = true;
+            unsubscribe();
+            changes.disconnect();
+            shifts.disconnect();
+            resize.disconnect();
+            style?.remove();
+            for (const port of ports.values()) {
+                port.rowElement.style.removeProperty('--adecore-tree-control-space');
+                port.rowElement.style.removeProperty('--adecore-tree-decoration-space');
+                port.control.remove();
+                port.decoration.remove();
+                port.lightControl.remove();
+                port.lightDecoration.remove();
+            }
+        };
+    }, [frame, model, label, prefix]);
+    return slots;
+}

package/dist/index.d.ts

@@ -1,4 +1,6 @@
 export * as ContextMenu from './context-menu/index.parts.ts';
+export * as FileTree from './file-tree/index.parts.ts';
+export * as Tree from './tree/index.parts.ts';
 export * as Dialog from './dialog/index.parts.ts';
 export * as KeyValueList from './key-value-list/index.parts.ts';
 export * as Menu from './menu/index.parts.ts';
@@ -76,3 +78,8 @@ export { useContentSize, type ContentSize } from './useContentSize.ts';
 export { useMeasuredWidth } from './useMeasuredWidth.ts';
 export { useNow, useTickingText } from './useNow.ts';
 export { ZOOM_PRESETS } from './zoom.ts';
+export { useFileTree, type FileTreeOptions } from './file-tree/use-file-tree.ts';
+export type { FileTreeRootProps } from './file-tree/parts.tsx';
+export type { FileTree as FileTreeModel, FileTreeVisibleRow, FileTreeDragAndDropConfig, FileTreeDropContext, FileTreeDropResult } from '@pierre/trees';
+export type { FoldKeyOf, SortRow } from './file-tree/helpers.ts';
+export type { TreeRootProps, TreeRowProps, TreeChevronProps, TreeChevronSlotProps, TreeLabelProps, TreeDecorationProps, TreeControlProps, TreeCheckboxProps } from './tree/parts.tsx';

package/dist/index.js

@@ -3,6 +3,8 @@
  * `exports.test.ts` turns any change to this list into a diff someone has to accept.
  */
 export * as ContextMenu from './context-menu/index.parts.js';
+export * as FileTree from './file-tree/index.parts.js';
+export * as Tree from './tree/index.parts.js';
 export * as Dialog from './dialog/index.parts.js';
 export * as KeyValueList from './key-value-list/index.parts.js';
 export * as Menu from './menu/index.parts.js';
@@ -74,3 +76,4 @@ export { useContentSize } from './useContentSize.js';
 export { useMeasuredWidth } from './useMeasuredWidth.js';
 export { useNow, useTickingText } from './useNow.js';
 export { ZOOM_PRESETS } from './zoom.js';
+export { useFileTree } from './file-tree/use-file-tree.js';

package/dist/locales/en.json

@@ -59,5 +59,10 @@
     "tabs": {
         "more": "More",
         "close": "Close tab"
+    },
+    "tree": {
+        "label": "Files",
+        "expand": "Expand",
+        "collapse": "Collapse"
     }
 }

package/dist/locales/nl.json

@@ -59,5 +59,10 @@
     "tabs": {
         "more": "Meer",
         "close": "Tabblad sluiten"
+    },
+    "tree": {
+        "label": "Bestanden",
+        "expand": "Uitvouwen",
+        "collapse": "Invouwen"
     }
 }

package/dist/theme.css

@@ -563,3 +563,106 @@
     .sliding-column[data-resizing],
     .sliding-column[data-instant] { transition: none; }
 }
+
+@layer components {
+    .adecore-tree {
+        --tree-row-height: 25px;
+        --tree-row-gap: 6px;
+        --tree-row-radius: 6px;
+        --trees-bg-override: transparent;
+        --trees-padding-inline-override: 8px;
+        --trees-bg-muted-override: var(--surface-hover);
+        --trees-fg-override: var(--text);
+        --trees-fg-muted-override: var(--text-muted);
+        --trees-selected-bg-override: var(--surface-active);
+        --trees-selected-fg-override: var(--text);
+        --trees-border-color-override: var(--border);
+        --trees-accent-override: var(--accent);
+        --trees-focus-ring-color-override: var(--accent);
+        --trees-selected-focused-border-color-override: var(--accent);
+        --trees-status-ignored-override: var(--text-faint);
+        --trees-git-ignored-color-override: var(--text-faint);
+        --trees-git-modified-color-override: var(--status-needs-you);
+        --trees-git-added-color-override: var(--status-idle);
+        --trees-git-untracked-color-override: var(--status-idle);
+        --trees-git-deleted-color-override: var(--status-error);
+        --trees-git-renamed-color-override: var(--status-running);
+        --trees-font-family-override: var(--font-sans);
+        --trees-font-size-override: var(--text-xs);
+    }
+    .adecore-tree-row {
+        margin-inline: 8px;
+        padding-inline-end: 8px;
+    }
+    .adecore-tree-guide {
+        pointer-events: none;
+        position: absolute;
+        inset-block: 0;
+        width: 1px;
+        background: var(--border);
+    }
+    .adecore-tree-chevron-slot {
+        display: grid;
+        place-items: center;
+        flex: none;
+        width: 16px;
+        height: 16px;
+        padding: 0;
+        border: 0;
+        background: transparent;
+        color: var(--text-muted);
+    }
+    .adecore-tree-label {
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+    .adecore-tree-control,
+    .adecore-tree-decoration {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        gap: 6px;
+    }
+    .adecore-tree-decoration {
+        font-variant-numeric: tabular-nums;
+    }
+    .adecore-file-tree {
+        position: relative;
+        min-height: 0;
+        overflow: hidden;
+    }
+    .adecore-file-tree-host {
+        display: block;
+        height: 100%;
+    }
+    .adecore-tree-shift {
+        pointer-events: none;
+        position: sticky;
+        bottom: 0;
+        height: 0;
+    }
+    .adecore-tree-shift-track {
+        position: absolute;
+        inset-inline: 8px;
+        bottom: 2px;
+        height: 6px;
+        opacity: 0;
+        transition: opacity 150ms ease-out;
+    }
+    .adecore-tree-shift-track[data-visible] {
+        opacity: 1;
+    }
+    .adecore-tree-shift-thumb {
+        position: absolute;
+        inset-block: 0;
+        border-radius: 999px;
+        background: var(--text-faint);
+    }
+    @media (prefers-reduced-motion: reduce) {
+        .adecore-tree-shift-track {
+            transition: none;
+        }
+    }
+}

package/dist/tree/index.parts.d.ts

@@ -0,0 +1 @@
+export { TreeRoot as Root, TreeRow as Row, TreeChevron as Chevron, TreeChevronSlot as ChevronSlot, TreeLabel as Label, TreeDecoration as Decoration, TreeControl as Control, TreeCheckbox as Checkbox } from './parts.tsx';

package/dist/tree/index.parts.js

@@ -0,0 +1 @@
+export { TreeRoot as Root, TreeRow as Row, TreeChevron as Chevron, TreeChevronSlot as ChevronSlot, TreeLabel as Label, TreeDecoration as Decoration, TreeControl as Control, TreeCheckbox as Checkbox } from './parts.js';

package/dist/tree/parts.d.ts

@@ -0,0 +1,27 @@
+import { useRender } from '@base-ui-components/react/use-render';
+import { type CheckboxProps } from '../Checkbox.tsx';
+export type TreeRootProps = useRender.ComponentProps<'div'>;
+export declare function TreeRoot({ render, className, ref, children, ...props }: TreeRootProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeRowProps = useRender.ComponentProps<'div'> & {
+    level?: number;
+    selected?: boolean;
+    joinedStart?: boolean;
+    joinedEnd?: boolean;
+    interactive?: boolean;
+};
+export declare function TreeRow({ level, selected, joinedStart, joinedEnd, interactive, render, className, ref, style, children, ...props }: TreeRowProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeChevronSlotProps = useRender.ComponentProps<'span'>;
+export declare function TreeChevronSlot({ render, className, ref, ...props }: TreeChevronSlotProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeChevronProps = useRender.ComponentProps<'button'> & {
+    expanded: boolean;
+    onExpandedChange?(expanded: boolean): void;
+};
+export declare function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }: TreeChevronProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeLabelProps = useRender.ComponentProps<'span'>;
+export declare function TreeLabel({ render, className, ref, ...props }: TreeLabelProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeDecorationProps = useRender.ComponentProps<'span'>;
+export declare function TreeDecoration({ render, className, ref, ...props }: TreeDecorationProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeControlProps = useRender.ComponentProps<'span'>;
+export declare function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }: TreeControlProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+export type TreeCheckboxProps = CheckboxProps;
+export declare function TreeCheckbox(props: TreeCheckboxProps): import("react").JSX.Element;

package/dist/tree/parts.js

@@ -0,0 +1,113 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import clsx from 'clsx';
+import { useRender } from '@base-ui-components/react/use-render';
+import { ChevronRight } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Checkbox as UICheckbox } from '../Checkbox.js';
+import { Icon } from '../Icon.js';
+import { treeRowStyle } from './style.js';
+export function TreeRoot({ render, className, ref, children, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'tree',
+            ...props,
+            className: clsx('adecore-tree', className),
+            children: (_jsxs(_Fragment, { children: [_jsx("style", { children: treeRowStyle('.adecore-tree-row') }), children] }))
+        }
+    });
+}
+export function TreeRow({ level = 1, selected = false, joinedStart = false, joinedEnd = false, interactive = true, render, className, ref, style, children, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'div',
+        props: {
+            role: 'treeitem',
+            'aria-level': level,
+            'aria-selected': selected,
+            ...props,
+            'data-selected': selected,
+            'data-joined-start': joinedStart,
+            'data-joined-end': joinedEnd,
+            'data-interactive': interactive,
+            className: clsx('adecore-tree-row', className),
+            style: { paddingInlineStart: 4 + (Math.max(1, level) - 1) * 16, ...style },
+            children: (_jsxs(_Fragment, { children: [Array.from({ length: Math.max(0, level - 1) }, (_, index) => (_jsx("span", { "aria-hidden": true, className: "adecore-tree-guide", style: { insetInlineStart: 11 + index * 16 } }, index))), children] }))
+        }
+    });
+}
+export function TreeChevronSlot({ render, className, ref, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: { 'aria-hidden': true, ...props, className: clsx('adecore-tree-chevron-slot', className) }
+    });
+}
+export function TreeChevron({ expanded, onExpandedChange, render, className, ref, onClick, onDoubleClick, ...props }) {
+    const { t } = useTranslation('ui');
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'button',
+        props: {
+            type: 'button',
+            tabIndex: -1,
+            'aria-label': t(expanded ? 'tree.collapse' : 'tree.expand'),
+            ...props,
+            className: clsx('adecore-tree-chevron-slot', className),
+            onClick: (event) => {
+                event.stopPropagation();
+                onClick?.(event);
+                if (!event.defaultPrevented) {
+                    onExpandedChange?.(!expanded);
+                }
+            },
+            onDoubleClick: (event) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            children: _jsx(Icon, { icon: ChevronRight, size: 12, className: expanded ? 'rotate-90' : undefined })
+        }
+    });
+}
+export function TreeLabel({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-label', className) } });
+}
+export function TreeDecoration({ render, className, ref, ...props }) {
+    return useRender({ render, ref, defaultTagName: 'span', props: { ...props, className: clsx('adecore-tree-decoration', className) } });
+}
+export function TreeControl({ render, className, ref, onClick, onDoubleClick, onKeyDown, onPointerDown, ...props }) {
+    return useRender({
+        render,
+        ref,
+        defaultTagName: 'span',
+        props: {
+            ...props,
+            'data-tree-control': true,
+            className: clsx('adecore-tree-control', className),
+            onClick: (event) => {
+                event.stopPropagation();
+                onClick?.(event);
+            },
+            onDoubleClick: (event) => {
+                event.stopPropagation();
+                onDoubleClick?.(event);
+            },
+            onKeyDown: (event) => {
+                event.stopPropagation();
+                onKeyDown?.(event);
+            },
+            onPointerDown: (event) => {
+                event.stopPropagation();
+                onPointerDown?.(event);
+            }
+        }
+    });
+}
+export function TreeCheckbox(props) {
+    return (_jsx(TreeControl, { children: _jsx(UICheckbox, { ...props }) }));
+}

package/dist/tree/style.d.ts

@@ -0,0 +1,2 @@
+export declare const TREE_ROW_HEIGHT = 25;
+export declare function treeRowStyle(selector: string, selected?: string): string;

package/dist/tree/style.js

@@ -0,0 +1,29 @@
+export const TREE_ROW_HEIGHT = 25;
+export function treeRowStyle(selector, selected = 'data-selected') {
+    return `
+        ${selector} {
+            box-sizing: border-box;
+            display: flex;
+            position: relative;
+            align-items: center;
+            height: var(--tree-row-height, 25px);
+            min-width: 0;
+            gap: var(--tree-row-gap, 6px);
+            border: 0;
+            border-radius: var(--tree-row-radius, 6px);
+            background: transparent;
+            background-clip: padding-box;
+            color: var(--text);
+            font-family: var(--font-sans);
+            font-size: var(--text-xs);
+            line-height: var(--tree-row-height, 25px);
+            text-align: start;
+            outline: none;
+        }
+        ${selector}[data-interactive="true"]:hover { background: var(--surface-hover); }
+        ${selector}[${selected}="true"] { background: var(--surface-active); color: var(--text); }
+        ${selector}[data-joined-start="true"] { border-start-start-radius: 0; border-start-end-radius: 0; }
+        ${selector}[data-joined-end="true"] { border-end-start-radius: 0; border-end-end-radius: 0; }
+        ${selector}:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
+    `;
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@adecore/ui",
-  "version": "0.16.0-beta.0",
+  "version": "0.17.0-beta.1",
   "description": "React components, a theme, formatters and a settings dialog for desktop-grade apps on React 19, Base UI and Tailwind 4.",
-  "license": "MIT",
+  "license": "(MIT AND FSL-1.1-MIT)",
   "author": "Bas Milius",
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
     "src",
     "!src/**/*.test.ts",
     "!src/**/*.test.tsx",
-    "!src/**/__snapshots__"
+    "!src/**/__snapshots__",
+    "!src/file-tree/testing"
   ],
   "exports": {
     ".": {
@@ -87,6 +88,7 @@
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
     "react-i18next": "^17.0.15",
-    "typescript": "^7.0.2"
+    "typescript": "^7.0.2",
+    "@happy-dom/global-registrator": "^20.14.5"
   }
 }

package/src/file-tree/LICENSE

@@ -0,0 +1,110 @@
+# Functional Source License, Version 1.1, MIT Future License
+
+## Abbreviation
+
+FSL-1.1-MIT
+
+## Notice
+
+Copyright 2026 Bas Milius
+
+## Terms and Conditions
+
+### Licensor ("We")
+
+The party offering the Software under these Terms and Conditions.
+
+### The Software
+
+The "Software" is each version of the software that we make available under
+these Terms and Conditions, as indicated by our inclusion of these Terms and
+Conditions with the Software.
+
+### License Grant
+
+Subject to your compliance with this License Grant and the Patents,
+Redistribution and Trademark clauses below, we hereby grant you the right to
+use, copy, modify, create derivative works, publicly perform, publicly display
+and redistribute the Software for any Permitted Purpose identified below.
+
+### Permitted Purpose
+
+A Permitted Purpose is any purpose other than a Competing Use. A Competing Use
+means making the Software available to others in a commercial product or
+service that:
+
+1. substitutes for the Software;
+
+2. substitutes for any other product or service we offer using the Software
+   that exists as of the date we make the Software available; or
+
+3. offers the same or substantially similar functionality as the Software.
+
+Permitted Purposes specifically include using the Software:
+
+1. for your internal use and access;
+
+2. for non-commercial education;
+
+3. for non-commercial research; and
+
+4. in connection with professional services that you provide to a licensee
+   using the Software in accordance with these Terms and Conditions.
+
+### Patents
+
+To the extent your use for a Permitted Purpose would necessarily infringe our
+patents, the license grant above includes a license under our patents. If you
+make a claim against any party that the Software infringes or contributes to
+the infringement of any patent, then your patent license to the Software ends
+immediately.
+
+### Redistribution
+
+The Terms and Conditions apply to all copies, modifications and derivatives of
+the Software.
+
+If you redistribute any copies, modifications or derivatives of the Software,
+you must include a copy of or a link to these Terms and Conditions and not
+remove any copyright notices provided in or with the Software.
+
+### Disclaimer
+
+THE SOFTWARE IS PROVIDED "AS IS" AND WITHOUT WARRANTIES OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING WITHOUT LIMITATION WARRANTIES OF FITNESS FOR A PARTICULAR
+PURPOSE, MERCHANTABILITY, TITLE OR NON-INFRINGEMENT.
+
+IN NO EVENT WILL WE HAVE ANY LIABILITY TO YOU ARISING OUT OF OR RELATED TO THE
+SOFTWARE, INCLUDING INDIRECT, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES,
+EVEN IF WE HAVE BEEN INFORMED OF THEIR POSSIBILITY IN ADVANCE.
+
+### Trademarks
+
+Except for displaying the License Details and identifying us as the origin of
+the Software, you have no right under these Terms and Conditions to use our
+trademarks, trade names, service marks or product names.
+
+## Grant of Future License
+
+We hereby irrevocably grant you an additional license to use the Software under
+the MIT license that is effective on the second anniversary of the date we make
+the Software available. On or after that date, you may use the Software under
+the MIT license, in which case the following will apply:
+
+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.